updateNativeStyles should only remove styles set by updateNativeStyles

Fixes #3800
Polymer · Jul 25, 2016 · 831be4f · 831be4f
1 parent 43955ea
commit 831be4f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
@@ -518,17 +518,23 @@
        * support element.customStyle / element.updateStyles)
        */
       updateNativeStyleProperties: function(element, properties) {
-        // remove existing properties
-        for (var i=0; i < element.style.length; i++) {
-          element.style.removeProperty(element.style[i]);
+        var oldPropertyNames = element.__customStyleProperties;
+        if (oldPropertyNames) {
+          // remove previous properties
+          for (var i=0; i < oldPropertyNames.length; i++) {
+            element.style.removeProperty(oldPropertyNames[i]);
+          }
         }
+        var propertyNames = [];
         // apply properties
         for (var p in properties) {
           // NOTE: for bc with shim, don't apply null values.
           if (properties[p] !== null) {
             element.style.setProperty(p, properties[p]);
+            propertyNames.push(p);
           }
         }
+        element.__customStyleProperties = propertyNames;
       },
 
       rx: styleUtil.rx,

diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
@@ -1163,6 +1163,33 @@
     CustomElements.takeRecords();
     assertComputed(e, 'rgb(102, 205, 170)', null, 'color');
   });
+
+  test('updateStyles plays nicely with inline styling', function() {
+    if (!Polymer.Settings.useNativeCSSProperties) {
+      this.skip();
+    }
+    var e = document.createElement('x-dynamic');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    e.style.cssText = 'background-color: rgb(255, 0, 0);';
+    e.updateStyles();
+    assertComputed(e, 'rgb(255, 0, 0)', null, 'background-color');
+  });
+  test('updateStyles removes the correct number of style properties', function() {
+    if (!Polymer.Settings.useNativeCSSProperties) {
+      this.skip();
+    }
+    var e = document.createElement('x-dynamic');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    e.style.cssText = 'background-color: rgb(255, 0, 0);';
+    e.updateStyles({'--dynamic': '2px solid black'});
+    assertComputed(e, 'rgb(255, 0, 0)', null, 'background-color');
+    assertComputed(e, '2px');
+    e.updateStyles({'--dynamic': null});
+    assertComputed(e, 'rgb(255, 0, 0)', null, 'background-color');
+    assertComputed(e, '6px');
+  });
 });
 
 </script>