Fixes Polymer#3801. Ensure style host calculates custom properties before element. This ensures the scope's styles are prepared to be inspected by the element for matching rules.

Steven Orvell · jorgecasar · commit b00813c01e4b · 2016-08-14T11:28:45.000+02:00
diff --git a/src/standard/x-styling.html b/src/standard/x-styling.html
@@ -118,6 +118,10 @@
 
       _updateStyleProperties: function() {
         var info, scope = this._findStyleHost();
+        // ensure scope properties exist before any access of scope cache.
+        if (!scope._styleProperties) {
+          scope._computeStyleProperties();
+        }
         // install cache in host if it doesn't exist.
         if (!scope._styleCache) {
           scope._styleCache = new Polymer.StyleCache();
@@ -184,8 +188,7 @@
       _computeStyleProperties: function(scopeProps) {
         // get scope and make sure it has properties
         var scope = this._findStyleHost();
-        // force scope to compute properties if they don't exist or if forcing
-        // and it doesn't need properties
+        // force scope to compute properties if they don't exist
         if (!scope._styleProperties) {
           scope._computeStyleProperties();
         }
diff --git a/test/runner.html b/test/runner.html
@@ -70,6 +70,7 @@
       'unit/styling-cross-scope-unknown-host.html',
       'unit/style-cache.html',
       'unit/custom-style.html',
+      'unit/custom-style-scope-cache.html',
       'unit/custom-style.html?lazyRegister=true&useNativeCSSProperties=true',
       'unit/custom-style.html?dom=shadow',
       'unit/custom-style.html?dom=shadow&lazyRegister=true&useNativeCSSProperties=true',
diff --git a/test/unit/custom-style-scope-cache.html b/test/unit/custom-style-scope-cache.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../polymer.html">
+
+</head>
+<body>
+  <style is="custom-style">
+    .c {
+      --cache-element-border: 8px solid blue;
+    }
+  </style>
+  <dom-module id="cache-element">
+    <template>
+      <style>
+        :host {
+          display: block;
+          border: var(--cache-element-border, 4px solid orange);
+        }
+      </style>
+      cache-element
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'cache-element'
+      });
+    });
+    </script>
+  </dom-module>
+
+  <cache-element id="cache1" class="c"></cache-element>
+  <cache-element id="cache2"></cache-element>
+
+  <script>
+
+    suite('custom-style scope cache', function() {
+
+      test('elements created declaratively conditionally styled via custom style receive correct properties', function() {
+        var t1 = document.querySelector('#cache1');
+        var t2 = document.querySelector('#cache2');;
+        assertComputed(t1, '8px');
+        assertComputed(t2, '4px');
+      });
+
+
+      test('elements created imperatively conditionally styled via custom style receive correct properties', function() {
+        var t1 = document.createElement('cache-element');
+        t1.classList.add('c');
+        var t2 = document.createElement('cache-element');
+        document.body.appendChild(t1);
+        document.body.appendChild(t2);
+        CustomElements.takeRecords();
+        assertComputed(t1, '8px');
+        assertComputed(t2, '4px');
+      });
+
+    });
+
+
+    function assertComputed(element, value, property, pseudo) {
+      var computed = getComputedStyle(element, pseudo);
+      property = property || 'border-top-width';
+      assert.equal(computed[property], value, 'computed style incorrect for ' + property);
+    }
+
+  </script>
+
+</body>
+</html>
