Fixes #335

googlearchive · Nov 4, 2013 · dad8803 · dad8803
1 parent 157fca1
commit dad8803
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 8 deletions.
diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js
@@ -396,15 +396,28 @@ var ShadowCSS = {
    * to
    *
    * scopeName.foo > .bar, .foo scopeName > .bar { }
-   * TODO(sorvell): file bug since native impl does not do the former yet.
-   * http://jsbin.com/OganOCI/2/edit
+   * 
+   * and
+   *
+   * :host(.foo:host) .bar { ... }
+   * 
+   * to
+   * 
+   * scopeName.foo .bar { ... }
   */
   convertColonHost: function(cssText) {
     // p1 = :host, p2 = contents of (), p3 rest of rule
     return cssText.replace(cssColonHostRe, function(m, p1, p2, p3) {
-      return p2 ? polyfillHostNoCombinator + p2 + p3 + ', ' 
-          + p2 + ' ' + p1 + p3 :
-          p1 + p3;
+      p1 = polyfillHostNoCombinator;
+      if (p2) {
+        if (p2.match(polyfillHost)) {
+          return p1 + p2.replace(polyfillHost, '') + p3;
+        } else {
+          return p1 + p2 + p3 + ', ' + p2 + ' ' + p1 + p3;
+        }
+      } else {
+        return p1 + p3;
+      }
     });
   },
   /*

diff --git a/test/html/styling/colon-host.html b/test/html/styling/colon-host.html
@@ -11,7 +11,7 @@
   <script src="../../../platform.js"></script>
   <script src="register.js"></script>
   <script src="../../../../tools/test/htmltest.js"></script>
-  <script src="../../../tools/test/chai/chai.js"></script>
+  <script src="../../../../tools/test/chai/chai.js"></script>
 </head>
 <body>
   <script>
@@ -70,6 +70,10 @@
       :host {
         background: green;
       }
+
+      :host:focus {
+        background: yellow;
+      };
     </style>
     <content></content>
   </template>
@@ -90,6 +94,11 @@
       :host {
         padding: 20px;
       }
+
+      :host(.foo:host) {
+        background: green;
+        display: block;
+      }
     </style>
     <div>padding: 20px</div>
   </template>
@@ -132,8 +141,12 @@ <h4>Expected: red background with black text and orange border</h4>
   <h4>Expected: red background with black text and orange border and 20px padding</h4>
   <x-zim></x-zim>
 
+  <h4>Expected: 20px padding, background green</h4>
+  <x-zim2 class="foo"></x-zim2>
   <h4>Expected: 20px padding</h4>
-  <x-zim2></x-zim2>
+  <div class="foo">
+    <x-zim2></x-zim2>
+  </div>
 
   <script>
     document.addEventListener('WebComponentsReady', function() {
@@ -202,10 +215,21 @@ <h4>Expected: 20px padding</h4>
       chai.assert.equal(zimStyle2.paddingLeft, '20px',
         ':host styles are loaded via external sheet in import (paddingLeft)');
 
+      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 zimStyle2_2 = getComputedStyle(zim2_2);
+      chai.assert.equal(zimStyle2.backgroundColor, 'rgb(0, 128, 0)', 
+        ':host(.foo:host) styles are applied (backgroundColor)');
+
       var btn = document.querySelector('[is=x-button]');
       var btnStyle = getComputedStyle(btn);
       chai.assert.equal(btnStyle.backgroundColor, 'rgb(0, 128, 0)', 
         ':host styles are shimmed for type extension (backgroundColor)');
+      btn.focus();
+      chai.assert.equal(btnStyle.backgroundColor, 'rgb(255, 255, 0)', 
+        ':host:active styles are shimmed (backgroundColor)');
 
       done();
 

diff --git a/test/html/styling/combinators.html b/test/html/styling/combinators.html
@@ -11,7 +11,7 @@
   <script src="../../../platform.js"></script>
   <script src="register.js"></script>
   <script src="../../../../tools/test/htmltest.js"></script>
-  <script src="../../../tools/test/chai/chai.js"></script>
+  <script src="../../../../tools/test/chai/chai.js"></script>
 </head>
 <body>
 

diff --git a/test/js/tests.js b/test/js/tests.js
@@ -28,6 +28,11 @@ htmlSuite('styling', function() {
   htmlTest('html/styling/pseudos.html?shadow&register');
   htmlTest('html/styling/polyfill-directive.html');
   htmlTest('html/styling/polyfill-rule.html');
+  // TODO(sorvell): blocked on https://code.google.com/p/chromium/issues/detail?id=313935
+  //htmlTest('html/styling/colon-host.html');
+  htmlTest('html/styling/colon-host.html?shadow&register');
+  htmlTest('html/styling/combinators.html');
+  htmlTest('html/styling/combinators.html?shadow&register');
 });
 
 htmlSuite('Library Cooperation', function() {