Correctly fix paths on shimmed, imported styles.

googlearchive · Feb 11, 2014 · e263883 · e263883
1 parent 3d161da
commit e263883
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 4 deletions.
diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js
@@ -163,7 +163,7 @@ var ShadowCSS = {
     var cssText = this.shimScoping(scopeStyles, name, typeExtension);
     // note: we only need to do rootStyles since these are unscoped.
     cssText += this.extractPolyfillUnscopedRules(rootStyles);
-    return cssText;
+    return cssText.trim();
   },
   registerDefinition: function(root, name, extendsName) {
     var def = this.registry[name] = {
@@ -302,8 +302,8 @@ var ShadowCSS = {
     cssText = this.convertColonHost(cssText);
     cssText = this.convertColonAncestor(cssText);
     cssText = this.convertCombinators(cssText);
-    var rules = cssToRules(cssText);
     if (name) {
+      var rules = cssToRules(cssText);
       cssText = this.scopeRules(rules, name, typeExtension);
     }
     return cssText;
@@ -555,17 +555,23 @@ if (window.ShadowDOMPolyfill) {
         SHIM_STYLE_SELECTOR
       ].join(',');
 
+      var originalParseGeneric = HTMLImports.parser.parseGeneric;
+
       HTMLImports.parser.parseGeneric = function(elt) {
         if (elt[SHIMMED_ATTRIBUTE]) {
           return;
         }
         var style = elt.__importElement || elt;
+        if (!style.hasAttribute(SHIM_ATTRIBUTE)) {
+          originalParseGeneric.call(this, elt);
+          return;
+        }
         if (elt.__resource) {
           style = elt.ownerDocument.createElement('style');
           style.textContent = urlResolver.resolveCssText(
               elt.__resource, elt.href);
         } else {
-          urlResolver.resolveStyles(style);  
+          urlResolver.resolveStyle(style);  
         }
         var styles = [style];
         style.textContent = ShadowCSS.stylesToShimmedCssText(styles, styles);
@@ -581,7 +587,7 @@ if (window.ShadowDOMPolyfill) {
             head.appendChild(style);
           }
         }
-        style.__importParsed = true
+        style.__importParsed = true;
         this.markParsingComplete(elt);
       }
 

diff --git a/test/html/ce-import.html b/test/html/ce-import.html
@@ -16,6 +16,11 @@
     <x-foo></x-foo>
     <script>
       window.addEventListener('WebComponentsReady', function() {
+        // native imports + shadowdom polyfill is not supported so just pass
+        if (HTMLImports.useNative && window.ShadowDOMPolyfill) {
+          done();
+          return;
+        }
         var xfoo = document.querySelector('x-foo');
         chai.assert.isUndefined(xfoo.isCreated);
         var link = document.createElement('link');

diff --git a/test/html/styling/assets/google.png b/test/html/styling/assets/google.png
diff --git a/test/html/styling/imports/sheet1.css b/test/html/styling/imports/sheet1.css
@@ -0,0 +1,3 @@
+.red {
+  background: red;
+}
diff --git a/test/html/styling/imports/sheet2.css b/test/html/styling/imports/sheet2.css
@@ -0,0 +1,3 @@
+.blue {
+  background: blue;
+}
diff --git a/test/html/styling/imports/style-import.html b/test/html/styling/imports/style-import.html
@@ -0,0 +1,11 @@
+<style sheet shim-shadowdom>@import 'sheet1.css';</style>
+
+<link rel="stylesheet" href="sheet2.css" shim-shadowdom>
+
+<style image shim-shadowdom>
+  .image {
+    background: url(../assets/google.png);
+    height: 190px;
+    width: 538px;
+  }
+</style>
diff --git a/test/html/styling/style-import.html b/test/html/styling/style-import.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Imports style loading</title>
+    <script src="../../../platform.js"></script>
+    <script src="../../../../tools/test/htmltest.js"></script>
+    <script src="../../../../tools/test/chai/chai.js"></script>
+    <link rel="import" href="imports/style-import.html">
+  </head>
+  <body>
+    <div id="test1" class="red">red</div>
+    <div id="test2" class="blue">blue</div>
+    <div id="test3" class="image"></div>
+    <script>
+      document.addEventListener('WebComponentsReady', function() {
+        function getComputed(selector) {
+          return getComputedStyle(document.querySelector(selector));
+        }
+
+        chai.assert.equal(getComputed('#test1').backgroundColor, 'rgb(255, 0, 0)', 'shimmed imported style is loaded');
+        chai.assert.equal(getComputed('#test2').backgroundColor, 'rgb(0, 0, 255)', 'shimmed imported sheet is loaded');
+        chai.assert.ok(getComputed('#test3').backgroundImage, 'shimmed imported style path is correct');
+        done();
+      });
+    </script>
+  </body>
+</html>
diff --git a/test/js/tests.js b/test/js/tests.js
@@ -34,6 +34,8 @@ htmlSuite('styling', function() {
   htmlTest('html/styling/combinators.html?shadow&register');
   htmlTest('html/styling/before-content.html');
   htmlTest('html/styling/before-content.html?shadow&register');
+  htmlTest('html/styling/before-content.html');
+  htmlTest('html/styling/style-import.html');
 });
 
 htmlSuite('Library Cooperation', function() {