From d6098eeb1c9510d599e9bd3cfdba7dd21e7a55a5 Mon Sep 17 00:00:00 2001
From: itchyny <itchyny@hatena.ne.jp>
Date: Thu, 4 Oct 2018 23:46:41 +0900
Subject: [PATCH] fix(ngStyle): skip setting empty value when new style has the
 property

Previously, all the properties in oldStyles are set to empty value once.
Using AngularJS with jQuery 3.3.1, this disables the CSS transition as
reported in jquery/jquery#4185.

Closes #16709
---
 src/ng/directive/ngStyle.js      |  9 ++++++++-
 test/ng/directive/ngStyleSpec.js | 33 ++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/ng/directive/ngStyle.js b/src/ng/directive/ngStyle.js
index afb7a79d269d..f1d3f66d90f0 100644
--- a/src/ng/directive/ngStyle.js
+++ b/src/ng/directive/ngStyle.js
@@ -54,7 +54,14 @@
 var ngStyleDirective = ngDirective(function(scope, element, attr) {
   scope.$watchCollection(attr.ngStyle, function ngStyleWatchAction(newStyles, oldStyles) {
     if (oldStyles && (newStyles !== oldStyles)) {
-      forEach(oldStyles, function(val, style) { element.css(style, '');});
+      if (!newStyles) {
+        newStyles = {};
+      }
+      forEach(oldStyles, function(val, style) {
+        if (newStyles[style] == null) {
+          newStyles[style] = '';
+        }
+      });
     }
     if (newStyles) element.css(newStyles);
   });
diff --git a/test/ng/directive/ngStyleSpec.js b/test/ng/directive/ngStyleSpec.js
index 7a8cfb2cd75f..51dd1c3fcb0c 100644
--- a/test/ng/directive/ngStyleSpec.js
+++ b/test/ng/directive/ngStyleSpec.js
@@ -120,5 +120,38 @@ describe('ngStyle', function() {
       expect(element.css(preCompStyle)).not.toBe('88px');
       expect(element.css(postCompStyle)).not.toBe('99px');
     });
+
+    it('should clear style when the new model is null', function() {
+      scope.styleObj = {'height': '99px', 'width': '88px'};
+      scope.$apply();
+      expect(element.css(preCompStyle)).toBe('88px');
+      expect(element.css(postCompStyle)).toBe('99px');
+      scope.styleObj = null;
+      scope.$apply();
+      expect(element.css(preCompStyle)).not.toBe('88px');
+      expect(element.css(postCompStyle)).not.toBe('99px');
+    });
+
+    it('should clear style when the value is undefined or null', function() {
+      scope.styleObj = {'height': '99px', 'width': '88px'};
+      scope.$apply();
+      expect(element.css(preCompStyle)).toBe('88px');
+      expect(element.css(postCompStyle)).toBe('99px');
+      scope.styleObj = {'height': undefined, 'width': null};
+      scope.$apply();
+      expect(element.css(preCompStyle)).not.toBe('88px');
+      expect(element.css(postCompStyle)).not.toBe('99px');
+    });
+
+    it('should set style when the value is zero', function() {
+      scope.styleObj = {'height': '99px', 'width': '88px'};
+      scope.$apply();
+      expect(element.css(preCompStyle)).toBe('88px');
+      expect(element.css(postCompStyle)).toBe('99px');
+      scope.styleObj = {'height': 0, 'width': 0};
+      scope.$apply();
+      expect(element.css(preCompStyle)).toBe('0px');
+      expect(element.css(postCompStyle)).toBe('0px');
+    });
   });
 });