Includes element defaults in the list of own properties by which elem…

…ents are styled. Fixes Polymer#1752 where an element that uses only values supplied by variable defaults can be incorrectly styled.
beneditobatista · Jun 16, 2015 · 411e285 · 411e285
1 parent e8169ec
commit 411e285
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
@@ -98,6 +98,10 @@
         var m;
         while (m = this.rx.VAR_CAPTURE.exec(cssText)) {
           props[m[1]] = true;
+          var def = m[2];
+          if (def && def.match(this.rx.IS_VAR)) {
+            props[def] = true;
+          }
         }
       },
 
@@ -336,6 +340,7 @@
         // var(--a, fallback-literal(with-one-nested-parens))
         VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*((?:[^,)]*)|(?:[^;]*\([^;)]*\)))[\s]*?\)/gim,
         VAR_CAPTURE: /\([\s]*(--[^,\s)]*)(?:,[\s]*(--[^,\s)]*))?(?:\)|,)/gim,
+        IS_VAR: /^--/,
         BRACKETED: /\{[^}]*\}/g,
         HOST_PREFIX: '(?:^|[^.])',
         HOST_SUFFIX: '($|[.:[\\s>+~])'

diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
@@ -199,6 +199,26 @@
     </script>
   </dom-module>
 
+  <dom-module id="x-has-def">
+    <style>
+      :host {
+        border: var(--border, --defaultBorder);
+        margin: 8px;
+        padding: 8px;
+        display: block;
+      }
+    </style>
+
+    <template>
+      Element with default variable.
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({is: 'x-has-def'});
+    });
+    </script>
+  </dom-module>
+
   <dom-module id="x-has-if">
     <style>
       .iffy {
@@ -254,6 +274,7 @@
         --default1: var(--undefined, 6px solid yellow);
         --default2: var(--undefined, --fallback);
         --default3: var(--undefined, rgb(128, 200, 250));
+        --defaultBorder: 22px solid green;
         --a: 10px;
         --b: 5px;
         --primary-color: rgb(128, 128, 128);
@@ -297,6 +318,10 @@
         background-color: var(--default3);
       }
 
+      #defaultElement2 {
+        --defaultBorder: 23px solid goldenrod;
+      }
+
       #overrides1a, #overrides1b, #overrides2 {
         --rename: 8px solid navy;
       }
@@ -341,6 +366,8 @@
       <div id="default1">default</div>
       <div id="default2">var default</div>
       <div id="default3">tricky property rgb(...) default</div>
+      <x-has-def id="defaultElement1"></x-has-def>
+      <x-has-def id="defaultElement2"></x-has-def>
       <div id="applyDefault1">default</div>
       <div id="applyDefault2">var default</div>
       <div id="calc">Calc</div>
@@ -503,6 +530,11 @@
   test('pseudo-elements can consume custom properties', function() {
     assertComputed(styled.$.after, '17px', '::after');
   });
+
+  test('elements using only variable defaults are styled properly', function() {
+    assertComputed(styled.$.defaultElement1, '22px');
+    assertComputed(styled.$.defaultElement2, '23px');
+  });
 
 });