Fixes https://github.com/Polymer/platform/issues/43.

googlearchive · Nov 16, 2013 · f8171d8 · f8171d8
1 parent d39c874
commit f8171d8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js
@@ -410,11 +410,16 @@ var ShadowCSS = {
     return cssText.replace(cssColonHostRe, function(m, p1, p2, p3) {
       p1 = polyfillHostNoCombinator;
       if (p2) {
-        if (p2.match(polyfillHost)) {
-          return p1 + p2.replace(polyfillHost, '') + p3;
-        } else {
-          return p1 + p2 + p3 + ', ' + p2 + ' ' + p1 + p3;
+        var parts = p2.split(','), r = [];
+        for (var i=0, l=parts.length, p; (i<l) && (p=parts[i]); i++) {
+          p = p.trim();
+          if (p.match(polyfillHost)) {
+            r.push(p1 + p.replace(polyfillHost, '') + p3);
+          } else {
+            r.push(p1 + p + p3 + ', ' + p + ' ' + p1 + p3);
+          }
         }
+        return r.join(',');
       } else {
         return p1 + p3;
       }

diff --git a/test/html/styling/colon-host.html b/test/html/styling/colon-host.html
@@ -100,7 +100,7 @@
         padding: 20px;
       }
 
-      :host(.foo:host) {
+      :host(.foo:host, .bar) {
         background: green;
         display: block;
       }
@@ -149,6 +149,11 @@ <h4>Expected: red background with black text and orange border and 20px padding<
 
   <h4>Expected: 20px padding, background green</h4>
   <x-zim2 class="foo"></x-zim2>
+
+  <h4>Expected: 20px padding, background green</h4>
+  <div class="bar">
+    <x-zim2></x-zim2>
+  </div>
   <h4>Expected: 20px padding</h4>
   <div class="foo">
     <x-zim2></x-zim2>
@@ -228,11 +233,16 @@ <h4>Expected: blue background</h4>
       chai.assert.equal(zimStyle2.backgroundColor, 'rgb(0, 128, 0)', 
         ':host(.foo:host) styles are applied (backgroundColor)');
 
-      var zim2_2 = document.querySelector('.foo x-zim2');
+      var zim2_2 = document.querySelector('.bar > x-zim2');
       var zimStyle2_2 = getComputedStyle(zim2_2);
-      chai.assert.equal(zimStyle2.backgroundColor, 'rgb(0, 128, 0)', 
+      chai.assert.equal(zimStyle2_2.backgroundColor, 'rgb(0, 128, 0)', 
         ':host(.foo:host) styles are applied (backgroundColor)');
 
+      var zim2_3 = document.querySelector('.foo > x-zim2');
+      var zimStyle2_3 = getComputedStyle(zim2_3);
+      chai.assert.notEqual(zimStyle2_3.backgroundColor, 'rgb(0, 128, 0)', 
+        ':host(.foo:host) styles are not applied when host doesn\'t contain .foo (backgroundColor)');
+
       var btn = document.querySelector('[is=x-button]');
       var btnStyle = getComputedStyle(btn);
       chai.assert.equal(btnStyle.backgroundColor, 'rgb(0, 128, 0)',