GreenPolyProducts/polymer
5
0
Fork 0
mirror of https://github.com/Polymer/polymer.git synced 2025-02-25 18:55:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

Defer property application only when a custom-style is first created.

Browse Source
This commit is contained in:
Steven Orvell 2015-11-13 16:05:53 -08:00
parent 27e1dcdc64
commit 4bf0e13b91
2 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/lib/custom-style.html
View File

@ -116,12 +116,12 @@ Note, all features of `custom-style` are available when defining styles as part
// 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 @@ Note, all features of `custom-style` are available when defining styles as part
// 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 @@ Note, all features of `custom-style` are available when defining styles as part
// `_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();
}
}
},

20
test/unit/custom-style.html
View File

@ -359,17 +359,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
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 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
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 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
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() {