Permalink
Browse files
Fixes #2218: match style properties against scope transformed selecto…
…r (not property unique selector)
- Loading branch information...
|
|
@@ -193,8 +193,12 @@ |
|
|
if (!rule.propertyInfo) {
|
|
|
self.decorateRule(rule);
|
|
|
}
|
|
|
+ // match element against transformedSelector: selector may contain
|
|
|
+ // unwanted uniquification and parsedSelector does not directly match
|
|
|
+ // for :host selectors.
|
|
|
if (element && rule.propertyInfo.properties &&
|
|
|
- matchesSelector.call(element, rule.parsedSelector)) {
|
|
|
+ matchesSelector.call(element, rule.transformedSelector
|
|
|
+ || rule.parsedSelector)) {
|
|
|
self.collectProperties(rule, props);
|
|
|
// produce numeric key for these matches for lookup
|
|
|
addToBitMask(i, o);
|
|
|
|
|
|
@@ -151,7 +151,10 @@ |
|
|
for (var i=0, l=p$.length, p; (i<l) && (p=p$[i]); i++) {
|
|
|
p$[i] = transformer.call(this, p, scope, hostScope);
|
|
|
}
|
|
|
- rule.selector = p$.join(COMPLEX_SELECTOR_SEP);
|
|
|
+ // NOTE: save transformedSelector for subsequent matching of elements
|
|
|
+ // agsinst selectors (e.g. when calculating style properties)
|
|
|
+ rule.selector = rule.transformedSelector =
|
|
|
+ p$.join(COMPLEX_SELECTOR_SEP);
|
|
|
},
|
|
|
|
|
|
_transformComplexSelector: function(selector, scope, hostScope) {
|
|
|
|
|
|
@@ -14,13 +14,13 @@ |
|
|
<body>
|
|
|
|
|
|
|
|
|
-<dom-module id="x-foo">
|
|
|
+<dom-module id="x-inside">
|
|
|
<style>
|
|
|
:host {
|
|
|
display: inline-block;
|
|
|
- height: var(--iron-icon-height);
|
|
|
- width: var(--iron-icon-width);
|
|
|
- margin: 20px;
|
|
|
+ border: var(--border) solid orange;
|
|
|
+ height: 10px;
|
|
|
+ width: 10px;
|
|
|
background-color: tomato;
|
|
|
}
|
|
|
</style>
|
|
|
@@ -28,39 +28,41 @@ |
|
|
|
|
|
</template>
|
|
|
<script>
|
|
|
+ HTMLImports.whenReady(function() {
|
|
|
Polymer({
|
|
|
- is: 'x-foo'
|
|
|
+ is: 'x-inside'
|
|
|
});
|
|
|
+ });
|
|
|
</script>
|
|
|
</dom-module>
|
|
|
|
|
|
|
|
|
-<dom-module id="simple-element">
|
|
|
+<dom-module id="dne-property">
|
|
|
<style>
|
|
|
:host {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
- x-foo {
|
|
|
- color: var(--ghost-property-doesnt-exist);
|
|
|
- --iron-icon-width: 10px; /* doesn't get applied */
|
|
|
- --iron-icon-height: 10px; /* doesn't get applied */
|
|
|
- margin-left: 10px; /* applied */
|
|
|
+ x-inside {
|
|
|
+ color: var(--dne);
|
|
|
+ --border: 10px;
|
|
|
}
|
|
|
</style>
|
|
|
<template>
|
|
|
- <x-foo></x-foo>
|
|
|
+ <x-inside id="inner"></x-inside>
|
|
|
</template>
|
|
|
<script>
|
|
|
+ HTMLImports.whenReady(function() {
|
|
|
Polymer({
|
|
|
- is: 'simple-element'
|
|
|
+ is: 'dne-property'
|
|
|
});
|
|
|
+ });
|
|
|
</script>
|
|
|
</dom-module>
|
|
|
|
|
|
-<simple-element></simple-element>
|
|
|
-<simple-element></simple-element>
|
|
|
-<simple-element></simple-element>
|
|
|
+<dne-property></dne-property>
|
|
|
+<dne-property></dne-property>
|
|
|
+<dne-property></dne-property>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
|
|
@@ -17,6 +17,9 @@ |
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
+ <simple-element></simple-element>
|
|
|
+ <simple-element></simple-element>
|
|
|
+
|
|
|
<x-scope></x-scope>
|
|
|
|
|
|
<dom-module id="x-grand-child-scope">
|
|
|
@@ -425,6 +428,52 @@ |
|
|
</script>
|
|
|
</dom-module>
|
|
|
|
|
|
+ <dom-module id="x-inside">
|
|
|
+ <style>
|
|
|
+ :host {
|
|
|
+ display: inline-block;
|
|
|
+ border: var(--border) solid orange;
|
|
|
+ height: 10px;
|
|
|
+ width: 10px;
|
|
|
+ background-color: tomato;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <template>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ <script>
|
|
|
+ HTMLImports.whenReady(function() {
|
|
|
+ Polymer({
|
|
|
+ is: 'x-inside'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</dom-module>
|
|
|
+
|
|
|
+
|
|
|
+<dom-module id="simple-element">
|
|
|
+ <style>
|
|
|
+ :host {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ x-inside {
|
|
|
+ color: var(--dne);
|
|
|
+ --border: 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <template>
|
|
|
+ <x-inside id="inner"></x-inside>
|
|
|
+ </template>
|
|
|
+ <script>
|
|
|
+ HTMLImports.whenReady(function() {
|
|
|
+ Polymer({
|
|
|
+ is: 'simple-element'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</dom-module>
|
|
|
+
|
|
|
<script>
|
|
|
suite('scoped-styling-var', function() {
|
|
|
|
|
|
@@ -440,6 +489,12 @@ |
|
|
|
|
|
var styled = document.querySelector('x-scope');
|
|
|
|
|
|
+ test('mutiple elements in document', function() {
|
|
|
+ var e$ = document.querySelectorAll('simple-element');
|
|
|
+ assertComputed(e$[0].$.inner, '10px');
|
|
|
+ assertComputed(e$[1].$.inner, '10px');
|
|
|
+ });
|
|
|
+
|
|
|
test('simple variables calculated correctly between scopes', function() {
|
|
|
assertStylePropertyValue(styled._styleProperties, '--scope-var', '1px');
|
|
|
//
|
|
|
|
0 comments on commit
c9e9062