From bcaddbfbe6c7bc86cc1b3f69363a6fa643850ba6 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Wed, 6 Nov 2013 13:19:13 -0800
Subject: [PATCH] handle multiple selectors with ^ and ^^.

---
 src/ShadowCSS.js                   |  2 +-
 test/html/styling/combinators.html | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js
index aca0229..f9a9fd6 100644
--- 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
index 09345dd..9ce8442 100644
--- 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');