Property matching must check non-transformed rule selector.

Polymer · Aug 7, 2015 · 5b9a5ce · 5b9a5ce
1 parent 0892e93
commit 5b9a5ce
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 2 deletions.
diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
@@ -194,7 +194,7 @@
             self.decorateRule(rule);
           }
           if (element && rule.propertyInfo.properties &&
-              matchesSelector.call(element, rule.selector)) {
+              matchesSelector.call(element, rule.parsedSelector)) {
             self.collectProperties(rule, props);
             // produce numeric key for these matches for lookup
             addToBitMask(i, o);

diff --git a/src/lib/style-util.html b/src/lib/style-util.html
@@ -48,7 +48,7 @@
       },
 
       forEachStyleRule: function(node, callback) {
-        var s = node.selector;
+        var s = node.parsedSelector;
         var skipRules = false;
         if (node.type === this.ruleTypes.STYLE_RULE) {
           callback(node);

diff --git a/test/smoke/bad-style-prop.html b/test/smoke/bad-style-prop.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html>
+<head>
+
+  <title>annotations</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer.html">
+
+</head>
+<body>
+
+
+<dom-module id="x-foo">
+  <style>
+    :host {
+      display: inline-block;
+      height: var(--iron-icon-height);
+      width: var(--iron-icon-width);
+      margin: 20px;
+      background-color: tomato;
+    }
+  </style>
+  <template>
+
+  </template>
+  <script>
+    Polymer({
+      is: 'x-foo'
+    });
+  </script>
+</dom-module>
+
+
+<dom-module id="simple-element">
+  <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 */
+    }
+  </style>
+  <template>
+    <x-foo></x-foo>
+  </template>
+  <script>
+    Polymer({
+      is: 'simple-element'
+    });
+  </script>
+</dom-module>
+
+<simple-element></simple-element>  
+<simple-element></simple-element>  
+<simple-element></simple-element>  
+
+</body>
+</html>