Shim styles containing combinators in stylesheets and style elements; f…

…ixes Polymer/polymer#354
googlearchive · Nov 25, 2013 · 0dc81d3 · 0dc81d3
1 parent 7b103dc
commit 0dc81d3
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 19 deletions.
diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js
@@ -165,14 +165,8 @@ var ShadowCSS = {
     if (this.strictStyling) {
       this.applyScopeToContent(root, name);
     }
-    // insert @polyfill and @polyfill-rule rules into style elements
-    // scoping process takes care of shimming these
-    this.insertPolyfillDirectives(def.rootStyles);
-    this.insertPolyfillRules(def.rootStyles);
-    var cssText = this.stylesToShimmedCssText(def.scopeStyles, name,
-        typeExtension);
-    // note: we only need to do rootStyles since these are unscoped.
-    cssText += this.extractPolyfillUnscopedRules(def.rootStyles);
+    var cssText = this.stylesToShimmedCssText(def.rootStyles, def.scopeStyles,
+        name, typeExtension);
     // provide shimmedStyle for user extensibility
     def.shimmedStyle = cssTextToStyle(cssText);
     if (root) {
@@ -186,6 +180,20 @@ var ShadowCSS = {
     // add style to document
     addCssToDocument(cssText);
   },
+  // apply @polyfill rules + @host and scope shimming
+  stylesToShimmedCssText: function(rootStyles, scopeStyles, name,
+      typeExtension) {
+    name = name || '';
+    // insert @polyfill and @polyfill-rule rules into style elements
+    // scoping process takes care of shimming these
+    this.insertPolyfillDirectives(rootStyles);
+    this.insertPolyfillRules(rootStyles);
+    var cssText = this.shimAtHost(scopeStyles, name, typeExtension) +
+        this.shimScoping(scopeStyles, name, typeExtension);
+    // note: we only need to do rootStyles since these are unscoped.
+    cssText += this.extractPolyfillUnscopedRules(rootStyles);
+    return cssText;
+  },
   registerDefinition: function(root, name, extendsName) {
     var def = this.registry[name] = {
       root: root,
@@ -304,11 +312,6 @@ var ShadowCSS = {
     }
     return r;
   },
-  // apply @host and scope shimming
-  stylesToShimmedCssText: function(styles, name, typeExtension) {
-    return this.shimAtHost(styles, name, typeExtension) +
-        this.shimScoping(styles, name, typeExtension);
-  },
   // form: @host { .foo { declarations } }
   // becomes: scopeName.foo { declarations }
   shimAtHost: function(styles, name, typeExtension) {
@@ -381,7 +384,9 @@ var ShadowCSS = {
     cssText = this.convertParts(cssText);
     cssText = this.convertCombinators(cssText);
     var rules = cssToRules(cssText);
-    cssText = this.scopeRules(rules, name, typeExtension);
+    if (name) {
+      cssText = this.scopeRules(rules, name, typeExtension);
+    }
     return cssText;
   },
   convertPseudos: function(cssText) {
@@ -575,6 +580,7 @@ function getSheet() {
   if (!sheet) {
     sheet = document.createElement("style");
     sheet.setAttribute('ShadowCSSShim', '');
+    sheet.shadowCssShim = true;
   }
   return sheet;
 }
@@ -584,6 +590,36 @@ if (window.ShadowDOMPolyfill) {
   addCssToDocument('style { display: none !important; }\n');
   var head = document.querySelector('head');
   head.insertBefore(getSheet(), head.childNodes[0]);
+
+  document.addEventListener('DOMContentLoaded', function() {
+    if (window.HTMLImports) {
+      HTMLImports.importer.preloadSelectors += 
+          ', link[rel=stylesheet]:not([nopolyfill])';
+      HTMLImports.parser.parseGeneric = function(elt) {
+        if (elt.shadowCssShim) {
+          return;
+        }
+        var style = elt;
+        if (!elt.hasAttribute('nopolyfill')) {
+          if (elt.__resource) {
+            style = document.createElement('style');
+            style.textContent = elt.__resource;
+            // remove links from main document
+            if (elt.ownerDocument === document) {
+              elt.parentNode.removeChild(elt);
+            }
+          }
+          var styles = [style];
+          style.textContent = ShadowCSS.stylesToShimmedCssText(styles, styles);
+          style.shadowCssShim = true;
+        }
+        // place in document
+        if (style.parentNode !== document.head) {
+          document.head.appendChild(style);
+        }
+      }
+    }
+  });
 }
 
 // exports

diff --git a/test/html/styling/combinators-import.css b/test/html/styling/combinators-import.css
@@ -0,0 +1,3 @@
+x-foo ^ .foo2 {
+  background: green;
+}
diff --git a/test/html/styling/combinators-import.html b/test/html/styling/combinators-import.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="combinators-import.css">
diff --git a/test/html/styling/combinators.css b/test/html/styling/combinators.css
@@ -0,0 +1,3 @@
+body ^^ x-zot ^ .zot-inner {
+  background: blue;
+}
diff --git a/test/html/styling/combinators.html b/test/html/styling/combinators.html
@@ -12,6 +12,13 @@
   <script src="register.js"></script>
   <script src="../../../../tools/test/htmltest.js"></script>
   <script src="../../../../tools/test/chai/chai.js"></script>
+  <style>
+    x-foo ^ .foo {
+      background: orange;
+    }
+  </style>
+  <link rel="stylesheet" href="combinators.css">
+  <link rel="import" href="combinators-import.html">
 </head>
 <body>
 
@@ -29,6 +36,8 @@
         color: white;
       }
     </style>
+    <div class="foo">orange</div>
+    <div class="foo2">green</div>
     <x-bar></x-bar>
   </template>
   <template id="x-bar">
@@ -44,6 +53,7 @@
 
   <template id="x-zot">
     <div class="zot">Zot</div>
+    <div class="zot-inner">inner</div>
   </template>
 
 
@@ -66,17 +76,27 @@
       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');
+      var xZot = foo.shadowRoot.querySelector('x-bar').shadowRoot
+          .querySelector('x-zot'); 
+      var zot = xZot.shadowRoot.querySelector('.zot');
 
       chai.assert.equal(getComputedStyle(zot).backgroundColor, 'rgb(0, 128, 0)',
         '^ styles are applied (backgroundColor)');
       chai.assert.equal(getComputedStyle(zot).color, 'rgb(255, 255, 255)',
         '^^ styles are applied (color)');
-      done();
-
 
+      var fooDiv = foo.shadowRoot.querySelector('.foo');
+      chai.assert.equal(getComputedStyle(fooDiv).backgroundColor, 'rgb(255, 165, 0)',
+        'combinators applied via style in main document');
+      if (window.ShadowDOMPolyfill) {
+        var fooDiv2 = foo.shadowRoot.querySelector('.foo2');
+        chai.assert.equal(getComputedStyle(fooDiv2).backgroundColor, 'rgb(0, 128, 0)',
+          'combinators applied via stylesheet in import');
+      }
+      var zotDiv = xZot.shadowRoot.querySelector('.zot-inner');
+      chai.assert.equal(getComputedStyle(zotDiv).backgroundColor, 'rgb(0, 0, 255)',
+        'combinators applied via stylesheet in main document');
+      done();
     });
   </script>
 </body>