handle multiple selectors with ^ and ^^.

googlearchive · Nov 6, 2013 · bcaddbf · bcaddbf
1 parent a74b81f
commit bcaddbf
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js
@@ -424,7 +424,7 @@ var ShadowCSS = {
    * Convert ^ and ^^ combinators by replacing with space.
   */
   convertCombinators: function(cssText) {
-    return cssText.replace('^^', ' ').replace('^', ' ');
+    return cssText.replace(/\^\^/g, ' ').replace(/\^/g, ' ');
   },
   // change a selector like 'div' to 'name div'
   scopeRules: function(cssRules, name, typeExtension) {

diff --git a/test/html/styling/combinators.html b/test/html/styling/combinators.html
@@ -21,6 +21,10 @@
         background: red;
       }
 
+      x-bar ^ .noogy {
+        background: blue;
+      }
+
       x-bar ^^ .zot {
         color: white;
       }
@@ -34,6 +38,7 @@
       }
     </style>
     <div class="bar">Bar</div>
+    <div class="noogy">Noogy</div>
     <x-zot></x-zot>
   </template>
 
@@ -53,12 +58,15 @@
   <script>
     document.addEventListener('WebComponentsReady', function() {
       var foo = document.querySelector('x-foo');
-      var bar = foo.shadowRoot.querySelector('x-bar').shadowRoot
-          .querySelector('.bar');
-
+      var xBarRoot = foo.shadowRoot.querySelector('x-bar').shadowRoot;
+      var bar = xBarRoot.querySelector('.bar');
       chai.assert.equal(getComputedStyle(bar).backgroundColor, 'rgb(255, 0, 0)',
         '^ styles are applied (backgroundColor)');
 
+      var noogy = xBarRoot.querySelector('.noogy');
+      chai.assert.equal(getComputedStyle(noogy).backgroundColor, 'rgb(0, 0, 255)',
+        '^ styles are applied (backgroundColor)');
+
       var zot = foo.shadowRoot.querySelector('x-bar').shadowRoot
           .querySelector('x-zot').shadowRoot.querySelector('.zot');