diff --git a/src/lib/custom-style.html b/src/lib/custom-style.html index 123fff069a..9847610628 100644 --- a/src/lib/custom-style.html +++ b/src/lib/custom-style.html @@ -116,12 +116,12 @@ // we may not have any textContent yet due to parser yielding // if so, wait until we do... if (e.textContent || this.include) { - this._apply(); + this._apply(true); } else { var self = this; var observer = new MutationObserver(function() { observer.disconnect(); - self._apply(); + self._apply(true); }); observer.observe(e, {childList: true}); } @@ -131,7 +131,7 @@ // polyfill this style with root scoping and // apply custom properties! - _apply: function() { + _apply: function(deferProperties) { // used applied element from HTMLImports polyfill or this var e = this.__appliedElement || this; if (this.include) { @@ -157,9 +157,18 @@ // `_apply` after B. // This case should only occur with native webcomponents. var self = this; - requestAnimationFrame(function() { + function fn() { self._applyCustomProperties(e); - }); + } + if (this._pendingApplyProperties) { + cancelAnimationFrame(this._pendingApplyProperties); + this._pendingApplyProperties = null; + } + if (deferProperties) { + this._pendingApplyProperties = requestAnimationFrame(fn); + } else { + fn(); + } } }, diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html index 65630f2ac2..058bc8e0f3 100644 --- a/test/unit/custom-style.html +++ b/test/unit/custom-style.html @@ -359,17 +359,15 @@ assertComputed(m, '4px'); }); - test('dynamic custom-styles apply', function(done) { + test('dynamic custom-styles apply', function() { var dynamic = document.querySelector('.dynamic'); assertComputed(dynamic, '0px'); var ds = document.createElement('style', 'custom-style'); ds.textContent = ':root { --dynamic: 11px solid orange; }'; document.head.appendChild(ds); + CustomElements.takeRecords(); Polymer.updateStyles(); - Polymer.RenderStatus.afterNextRender(null, function() { - assertComputed(dynamic, '11px'); - done(); - }); + assertComputed(dynamic, '11px'); }); test('custom-styles apply normal and property values to elements and cannot be late bound via inheritance', function() { @@ -409,7 +407,7 @@ document.body.removeChild(style); }); - test('imperative custom style with include', function(done) { + test('imperative custom style with include', function() { var style = document.createElement('style', 'custom-style'); style.include = 'shared-style2'; var d = document.createElement('div'); @@ -417,12 +415,10 @@ document.body.appendChild(d); document.body.appendChild(style); CustomElements.takeRecords(); - Polymer.RenderStatus.afterNextRender(null, function() { - assertComputed(d, '16px'); - document.body.removeChild(d); - document.body.removeChild(style); - done(); - }); + Polymer.updateStyles(); + assertComputed(d, '16px'); + document.body.removeChild(d); + document.body.removeChild(style); }); test('imperative custom style with non-existent include', function() {