Fixes #2218: match style properties against scope transformed selecto…

…r (not property unique selector)
Polymer · Aug 7, 2015 · c9e9062 · c9e9062
1 parent 5b9a5ce
commit c9e9062
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 18 deletions.
diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
@@ -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);

diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
@@ -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) {

diff --git a/test/smoke/bad-style-prop.html b/test/smoke/bad-style-prop.html
@@ -14,53 +14,55 @@
 <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>
   <template>
 
   </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>
diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.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');
      //