Ensure custom styles updated after adding custom-style async. Fixes #…

…3705.
Polymer · Jun 10, 2016 · f770438 · f770438
1 parent b9c874e
commit f770438
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 1 deletion.
diff --git a/src/lib/custom-style.html b/src/lib/custom-style.html
@@ -96,9 +96,11 @@
   var styleDefaults = Polymer.StyleDefaults;
   var styleTransformer = Polymer.StyleTransformer;
   var applyShim = Polymer.ApplyShim;
-
+  var debounce = Polymer.Debounce;
   var settings = Polymer.Settings;
 
+  var updateDebouncer;
+
   Polymer({
 
     is: 'custom-style',
@@ -144,6 +146,9 @@
           if (!settings.useNativeCSSProperties) {
             styleDefaults.addStyle(e);
           }
+          if (Polymer.RenderStatus.hasRendered()) {
+            updateDebouncer = debounce(updateDebouncer, this._updateStyles);
+          }
           // we may not have any textContent yet due to parser yielding
           // if so, wait until we do...
           if (e.textContent || this.include) {
@@ -160,6 +165,10 @@
       }
     },
 
+    _updateStyles: function() {
+      Polymer.updateStyles();
+    },
+
     // polyfill this style with root scoping and
     // apply custom properties!
     _apply: function(deferProperties) {

diff --git a/src/lib/render-status.html b/src/lib/render-status.html
@@ -57,6 +57,10 @@
       this._afterNextRenderQueue.push([element, fn, args]);
     },
 
+    hasRendered: function() {
+      return this._ready;
+    },
+
     _watchNextRender: function() {
       if (!this._waitingNextRender) {
         this._waitingNextRender = true;

diff --git a/test/runner.html b/test/runner.html
@@ -69,6 +69,10 @@
       'unit/custom-style.html?dom=shadow',
       'unit/custom-style.html?dom=shadow&lazyRegister=true&useNativeCSSProperties=true',
       'unit/custom-style-late.html',
+      'unit/custom-style-async.html',
+      'unit/custom-style-async.html?dom=shadow',
+      'unit/custom-style-async-native.html',
+      'unit/custom-style-async-native.html?dom=shadow',
       'unit/dynamic-import.html',
       'unit/templatizer.html',
       'unit/dom-repeat.html',

diff --git a/test/unit/custom-style-async-import.html b/test/unit/custom-style-async-import.html
@@ -0,0 +1,24 @@
+<style is="custom-style">
+  :root {
+    --cs-blue: {
+      border : 8px solid blue;
+    };
+  }
+</style>
+<dom-module id="x-client">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+        border : 4px solid red;
+        @apply (--cs-blue);
+      }
+    </style>
+    x-client
+  </template>
+  <script>
+    Polymer({
+      is: 'x-client'
+    });
+  </script>
+</dom-module>
diff --git a/test/unit/custom-style-async-native.html b/test/unit/custom-style-async-native.html
@@ -0,0 +1,68 @@
+<!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>
+  <script>Polymer = {lazyRegister: true, useNativeCSSProperties: true};</script>
+  <link rel="import" href="../../polymer.html">
+
+</head>
+<body>
+
+  <dom-module id="x-host">
+    <template>
+      <style>
+        :host {
+          display: inline-block;
+          border: 4px solid orange;
+          padding: 4px;
+        }
+        .whatever { color: var(--whatever); }
+      </style>
+      <x-client id="client"></x-client>
+    </template>
+  </dom-module>
+  <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'x-host'
+      })
+    });
+  </script>
+
+  <x-host id="host"></x-host>
+
+  <script>
+  /* global input */
+
+    suite('async global custom-style', function() {
+
+      test('async loaded custom-style applies', function(done) {
+        host.importHref('custom-style-async-import.html', function() {
+          assertComputed(host.$.client, '8px');
+          done();
+        });
+      });
+
+    });
+
+    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>
diff --git a/test/unit/custom-style-async.html b/test/unit/custom-style-async.html
@@ -0,0 +1,67 @@
+<!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>
+
+  <dom-module id="x-host">
+    <template>
+      <style>
+        :host {
+          display: inline-block;
+          border: 4px solid orange;
+          padding: 4px;
+        }
+        .whatever { color: var(--whatever); }
+      </style>
+      <x-client id="client"></x-client>
+    </template>
+  </dom-module>
+  <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'x-host'
+      })
+    });
+  </script>
+
+  <x-host id="host"></x-host>
+
+  <script>
+  /* global input */
+
+    suite('async global custom-style', function() {
+
+      test('async loaded custom-style applies', function(done) {
+        host.importHref('custom-style-async-import.html', function() {
+          assertComputed(host.$.client, '8px');
+          done();
+        });
+      });
+
+    });
+
+    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>