[property shim] Make sure "initial" and "inherit" behave as they woul…

…d natively Fixes #3803
Polymer · Jul 27, 2016 · 0887dba · 0887dba
1 parent be74f7e
commit 0887dba
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 4 deletions.
diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
@@ -91,10 +91,15 @@
         } else {
           var m, rx = this.rx.VAR_ASSIGN;
           var cssText = rule.parsedCssText;
+          var value;
           var any;
           while ((m = rx.exec(cssText))) {
             // note: group 2 is var, 3 is mixin
-            properties[m[1].trim()] = (m[2] || m[3]).trim();
+            value = (m[2] || m[3]).trim();
+            // value of 'inherit' is equivalent to not setting the property here
+            if (value !== 'inherit') {
+              properties[m[1].trim()] = value;
+            }
             any = true;
           }
           return any;
@@ -153,10 +158,13 @@
             // case (2) variable
             var self = this;
             var fn = function(prefix, value, fallback, suffix) {
-              var propertyValue = (self.valueForProperty(props[value], props) ||
+              var propertyValue = self.valueForProperty(props[value], props);
+              // if value is "initial", then the variable should be treated as unset
+              if (!propertyValue || propertyValue === 'initial') {
                 // fallback may be --a or var(--a) or literal
-                self.valueForProperty(props[fallback] || fallback, props) ||
-                fallback);
+                propertyValue = self.valueForProperty(props[fallback] || fallback, props) ||
+                fallback;
+              }
               return prefix + (propertyValue || '') + suffix;
             };
             property = styleUtil.processVariableAndFallback(property, fn);

diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
@@ -773,6 +773,60 @@
   </script>
 </dom-module>
 
+<dom-module id="x-inherit">
+  <template>
+    <style>
+    :host {
+      --border: inherit;
+      border: var(--border, 10px solid black);
+    }
+    </style>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-inherit'
+    })
+  });
+  </script>
+</dom-module>
+
+<dom-module id="x-inherit-parent">
+  <template>
+    <style>
+    #child {
+      --border: 5px solid blue;
+    }
+    </style>
+    <x-inherit id="child"></x-inherit>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-inherit-parent'
+    })
+  });
+  </script>
+</dom-module>
+
+<dom-module id="x-initial">
+  <template>
+    <style>
+    :host {
+      --border: initial;
+      border: var(--border, 10px solid black);
+    }
+    </style>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-initial'
+    })
+  });
+  </script>
+</dom-module>
+
 <script>
   suite('scoped-styling-var', function() {
 
@@ -1190,6 +1244,31 @@
     assertComputed(e, 'rgb(255, 0, 0)', null, 'background-color');
     assertComputed(e, '6px');
   });
+
+  test('"initial" as a custom property value works as expected', function() {
+    if (Polymer.Settings.useNativeCSSProperties) {
+      this.skip();
+    }
+    var e = document.createElement('x-initial');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    assertComputed(e, '10px');
+  });
+
+  test('"inherit" as a custom property value works as expected', function() {
+    if (Polymer.Settings.useNativeCSSProperties) {
+      this.skip();
+    }
+    var e = document.createElement('x-inherit');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    assertComputed(e, '10px');
+
+    e = document.createElement('x-inherit-parent');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    assertComputed(e.$.child, '5px');
+  });
 });
 
 </script>