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() {