From b5ba9a82195a993a214ee6ff4d10d4f51f5c9597 Mon Sep 17 00:00:00 2001 From: Steven Orvell Date: Thu, 4 Feb 2016 17:55:52 -0800 Subject: [PATCH 1/8] Fixes #3326. Changes inspired by #3276 and #3344 --- src/lib/style-properties.html | 14 ++--------- src/standard/styling.html | 11 +++++++- src/standard/x-styling.html | 16 ++++++++++++ test/unit/styling-cross-scope-var.html | 3 ++- test/unit/styling-remote.html | 22 +++++++++++----- test/unit/styling-scoped.html | 35 ++++++++++++++++++-------- 6 files changed, 71 insertions(+), 30 deletions(-) diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html index 544a0be9..b1c64955 100644 --- a/src/lib/style-properties.html +++ b/src/lib/style-properties.html @@ -88,17 +88,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN // but not production, so strip out {...} cssText = cssText.replace(this.rx.BRACKETED, '') .replace(this.rx.VAR_ASSIGN, ''); - var parts = cssText.split(';'); - for (var i=0, p; i= o, 'style not in registration order: ' + scope); + o = n; } - assert.deepEqual(actual, expected); }); }); } diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html index 6a27b2aa..d3215818 100644 --- a/test/unit/styling-scoped.html +++ b/test/unit/styling-scoped.html @@ -249,17 +249,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN }); test('styles shimmed in registration order', function() { - var s$ = document.head.querySelectorAll('style[scope]'); - var expected = ['x-keyframes', 'x-keyframes-1', 'x-keyframes-0', 'x-gchild', 'x-child2', - 'x-styled', 'x-button', 'x-mixed-case', 'x-mixed-case-button', - 'x-dynamic-scope', 'x-dynamic-template', 'x-dynamic-svg', - 'x-specificity', 'x-overriding', 'x-overriding-0', - 'x-specificity-parent-0', 'x-specificity-nested-0']; - var actual = []; - for (var i=0; i= o, 'style not in registration order: ' + scope); + o = n; } - assert.deepEqual(actual, expected); }); test('svg elements properly scoped', function() { @@ -306,6 +312,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN test('specificity of ::content > :not(template) selector', function() { assertComputed(document.querySelector('[is=x-specificity-nested]'), '10px'); }); + + test('overwriting mixin properties', function() { + var root = document.querySelector('x-overriding'); + assertComputed(root.querySelector('.red'), '1px'); + assertComputed(root.querySelector('.green'), '2px'); + assertComputed(root.querySelector('.red-2'), '1px'); + assertComputed(root.querySelector('.blue'), '3px'); + }); + }); test('svg classes are dynamically scoped correctly', function() { From 162f81ea0d7d56a3fd6aec0555e5e72187a0caa5 Mon Sep 17 00:00:00 2001 From: Steven Orvell Date: Thu, 4 Feb 2016 19:03:28 -0800 Subject: [PATCH 2/8] Fixes for IE style ordering issue. --- src/standard/styling.html | 4 +++- src/standard/x-styling.html | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/standard/styling.html b/src/standard/styling.html index 80bc2ed1..fc637c94 100644 --- a/src/standard/styling.html +++ b/src/standard/styling.html @@ -47,7 +47,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN var cssText = styleTransformer.elementStyles(this); // do we really need to output shimmed styles var needsStatic = this._needsStaticStyles(this._styles); - cssText = needsStatic ? cssText : ''; + // NOTE: IE has css style ordering issues unless there's at least a + // space in the stylesheet. + cssText = needsStatic ? cssText : ' '; // under shady dom we always output a shimmed style (which may be // empty) so that other dynamic stylesheets can always be placed // after the element's main stylesheet. diff --git a/src/standard/x-styling.html b/src/standard/x-styling.html index b64d5a9c..6d16020e 100644 --- a/src/standard/x-styling.html +++ b/src/standard/x-styling.html @@ -32,7 +32,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN _needsStaticStyles: function(styles) { var needsStatic; for (var i=0, l=styles.length, css; i < l; i++) { - css = styles[i].textContent; + css = styleUtil.parser._clean(styles[i].textContent); needsStatic = needsStatic || Boolean(css); if (css.match(propertyUtils.rx.MIXIN_MATCH) || css.match(propertyUtils.rx.VAR_MATCH)) { From b0e16f07a26049a290a9063a4a062f8340df641f Mon Sep 17 00:00:00 2001 From: Steven Orvell Date: Thu, 11 Feb 2016 10:46:01 -0800 Subject: [PATCH 3/8] Add comment and fix typo --- src/lib/style-properties.html | 7 ++++++- src/standard/x-styling.html | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html index 245ec42c..1d9ec991 100644 --- a/src/lib/style-properties.html +++ b/src/lib/style-properties.html @@ -349,7 +349,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN // Strategy: x scope shim a selector e.g. to scope `.x-foo-42` (via classes): // non-host selector: .a.x-foo -> .x-foo-42 .a.x-foo - // host selector: x-foo.wide -> x-foo.x-foo-42.wide + // host selector: x-foo.wide -> .x-foo-42.wide + // note: we use only the scope class (.x-foo-42) and not the hostSelector + // (x-foo) to scope :host rules; this helps make property host rules + // have low specificity. They are overrideable by class selectors but, + // unfortunately, not by type selectors (e.g. overriding via + // `.special` is ok, but not by `x-foo`). _scopeSelector: function(rule, hostRx, hostSelector, viaAttr, scopeId) { rule.transformedSelector = rule.transformedSelector || rule.selector; var selector = rule.transformedSelector; diff --git a/src/standard/x-styling.html b/src/standard/x-styling.html index 196efd25..deb5438f 100644 --- a/src/standard/x-styling.html +++ b/src/standard/x-styling.html @@ -18,6 +18,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN var serializeValueToAttribute = Polymer.Base.serializeValueToAttribute; var propertyUtils = Polymer.StyleProperties; + var styleUtil = Polymer.StyleUtil; var styleTransformer = Polymer.StyleTransformer; var styleDefaults = Polymer.StyleDefaults; From 71c41ed62db845a7b442c5e53b76ab92a9378a82 Mon Sep 17 00:00:00 2001 From: Steven Orvell Date: Thu, 11 Feb 2016 11:12:45 -0800 Subject: [PATCH 4/8] Add test for overriding property based :host selector from outside. --- test/unit/styling-cross-scope-var.html | 60 +++++++++++++++++++++++--- 1 file changed, 54 insertions(+), 6 deletions(-) diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html index 03e36835..3452e167 100644 --- a/test/unit/styling-cross-scope-var.html +++ b/test/unit/styling-cross-scope-var.html @@ -14,6 +14,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN + @@ -528,12 +533,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN - - + + + + + + + + + + + + + diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html index d3215818..21574ad8 100644 --- a/test/unit/styling-scoped.html +++ b/test/unit/styling-scoped.html @@ -236,6 +236,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN document.body.removeChild(el); }); + test('attribute inclusive selector and general sibling selectors', function() { + var e = document.createElement('x-attr-selector'); + document.body.appendChild(e); + assertComputed(e.$.bar1, '2px'); + assertComputed(e.$.bar2, '4px'); + assertComputed(e.$.bar3, '6px'); + }); + suite('scoped-styling-shady-only', function() { suiteSetup(function() { @@ -333,6 +341,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN computed = getComputedStyle(circle); assert.equal(computed['fill-opacity'], '0.5'); }); + }); From f2c1d4a5eb016c349866c6e2eeb4620b28719296 Mon Sep 17 00:00:00 2001 From: Steven Orvell Date: Fri, 12 Feb 2016 19:05:15 -0800 Subject: [PATCH 7/8] Minor fixes based on review. --- src/standard/styling.html | 6 +++--- test/unit/styling-cross-scope-var.html | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/standard/styling.html b/src/standard/styling.html index fc637c94..edf1144b 100644 --- a/src/standard/styling.html +++ b/src/standard/styling.html @@ -47,14 +47,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN var cssText = styleTransformer.elementStyles(this); // do we really need to output shimmed styles var needsStatic = this._needsStaticStyles(this._styles); - // NOTE: IE has css style ordering issues unless there's at least a - // space in the stylesheet. - cssText = needsStatic ? cssText : ' '; // under shady dom we always output a shimmed style (which may be // empty) so that other dynamic stylesheets can always be placed // after the element's main stylesheet. // This helps ensure element styles are always in registration order. if (needsStatic || !nativeShadow) { + // NOTE: IE has css style ordering issues unless there's at least a + // space in the stylesheet. + cssText = needsStatic ? cssText : ' '; var style = styleUtil.applyCss(cssText, this.is, nativeShadow ? this._template.content : null); // keep track of style when in document scope (polyfill) so we can diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html index ae72cd0c..6c06e3c7 100644 --- a/test/unit/styling-cross-scope-var.html +++ b/test/unit/styling-cross-scope-var.html @@ -845,7 +845,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN assert.equal('url(http://placehold.it/400x300)', url); }); - // skip for now, until #3326 is fixed test('custom style class overrides css variable', function() { var d = document.createElement('x-variable-override'); d.classList.add('variable-override'); From 7da9a38fcdc9357d1ea959b16358d530342ce71d Mon Sep 17 00:00:00 2001 From: Steven Orvell Date: Fri, 12 Feb 2016 19:16:17 -0800 Subject: [PATCH 8/8] fix lint errors --- test/unit/styling-cross-scope-var.html | 2 +- test/unit/styling-remote.html | 2 +- test/unit/styling-scoped.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html index 6c06e3c7..f4b8b506 100644 --- a/test/unit/styling-cross-scope-var.html +++ b/test/unit/styling-cross-scope-var.html @@ -603,7 +603,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN suite('scoped-styling-var', function() { function assertComputed(element, value, pseudo, name) { - var name = name || 'border-top-width'; + name = name || 'border-top-width'; var computed = element.getComputedStyleValue && !pseudo ? element.getComputedStyleValue(name) : getComputedStyle(element, pseudo)[name]; diff --git a/test/unit/styling-remote.html b/test/unit/styling-remote.html index 80eb3ed1..d3ec1c1a 100644 --- a/test/unit/styling-remote.html +++ b/test/unit/styling-remote.html @@ -203,7 +203,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN return reg.is; }); function regIndex(styleScope) { - for (var i=0; (r=regList[i]); i++) { + for (var i=0, r; (r=regList[i]); i++) { if (styleScope.match(new RegExp(r + '\\-?\\d*$'))) { return i; } diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html index f82a0a58..5aaa7328 100644 --- a/test/unit/styling-scoped.html +++ b/test/unit/styling-scoped.html @@ -265,7 +265,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN return reg.is; }); function regIndex(styleScope) { - for (var i=0; (r=regList[i]); i++) { + for (var i=0, r; (r=regList[i]); i++) { if (styleScope.match(new RegExp(r + '\\-?\\d*$'))) { return i; }