Merge pull request #3708 from Polymer/3705-kschaaf-async-customstyle

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

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',
@@ -126,9 +128,16 @@
       if (this.__appliedElement !== this) {
         this.__appliedElement.__cssBuild = this.__cssBuild;
       }
+      // needed becuase elements in imports do not get 'attached'
+      // TODO(sorvell): we could only do this iff this.ownerDocument != document;
+      // however, if we do that, we also have to change the `attached`
+      // code to go at `_beforeAttached` time because this is when 
+      // elements produce styles (otherwise this breaks @apply shim)
       this._tryApply();
     },
 
+    // needed to support dynamic custom styles created outside document
+    // and then added to it.
     attached: function() {
       this._tryApply();
     },
@@ -142,6 +151,11 @@
           var e = this.__appliedElement;
           // used applied element from HTMLImports polyfill or this
           if (!settings.useNativeCSSProperties) {
+            // if default style properties exist when 
+            // this element tries to apply styling then,
+            // it has been loaded async and needs to trigger a full updateStyles
+            // to guarantee properties it provides update correctly.
+            this.__needsUpdateStyles = styleDefaults.hasStyleProperties();
             styleDefaults.addStyle(e);
           }
           // we may not have any textContent yet due to parser yielding
@@ -160,9 +174,13 @@
       }
     },
 
+    _updateStyles: function() {
+      Polymer.updateStyles();
+    },
+
     // polyfill this style with root scoping and
     // apply custom properties!
-    _apply: function(deferProperties) {
+    _apply: function(initialApply) {
       // used applied element from HTMLImports polyfill or this
       var e = this.__appliedElement;
       if (this.include) {
@@ -180,7 +198,6 @@
       // build = shady, use = shadow => not supported
       // build = shadow, use = shady => needs shimming.
       // build = none => needs shimming
-
       var buildType = this.__cssBuild;
       var targetedBuild = styleUtil.isTargetedBuild(buildType);
 
@@ -224,20 +241,28 @@
         // This case should only occur with native webcomponents.
         var self = this;
         var fn = function fn() {
-          self._applyCustomProperties();
+          self._flushCustomProperties();
         }
-        if (this._pendingApplyProperties) {
-          cancelAnimationFrame(this._pendingApplyProperties);
-          this._pendingApplyProperties = null;
-        }
-        if (deferProperties) {
-          this._pendingApplyProperties = requestAnimationFrame(fn);
+        if (initialApply) {
+          Polymer.RenderStatus.whenReady(fn);
         } else {
           fn();
         }
       }
     },
 
+    _flushCustomProperties: function() {
+      // if this style has not yet applied at all and it was loaded asynchronously
+      // (detected by Polymer being ready when this element tried to apply), then
+      // do a full updateStyles to ensure that 
+      if (this.__needsUpdateStyles) {
+        this.__needsUpdateStyles = false;
+        updateDebouncer = debounce(updateDebouncer, this._updateStyles);
+      } else {
+        this._applyCustomProperties();
+      }
+    },
+
     _applyCustomProperties: function() {
       var element = this.__appliedElement;
       this._computeStyleProperties();

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;

src/lib/style-defaults.html

@@ -49,6 +49,10 @@
         return this._properties;
       },
 
+      hasStyleProperties: function() {
+        return Boolean(this._properties);
+      },
+
       _needsStyleProperties: function() {},
 
       _computeStyleProperties: function() {

test/runner.html

@@ -70,6 +70,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.html?lazyRegister=true&useNativeCSSProperties=true',
+      'unit/custom-style-async.html?lazyRegister=true&useNativeCSSProperties=true&dom=shadow',
       'unit/dynamic-import.html',
       'unit/templatizer.html',
       'unit/dom-repeat.html',

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>

test/unit/custom-style-async.html

@@ -0,0 +1,69 @@
+<!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 host */
+
+    suite('async global custom-style', function() {
+
+      test('async loaded custom-style applies', function(done) {
+        host.importHref('custom-style-async-import.html', function() {
+          Polymer.RenderStatus.afterNextRender(host.$.client, 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>