ensure path fixup is applied correctly to styles in templates.

Polymer · Aug 7, 2015 · b22f3cd · b22f3cd
1 parent f469129
commit b22f3cd
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 9 deletions.
diff --git a/src/lib/custom-style.html b/src/lib/custom-style.html
@@ -132,10 +132,6 @@
     _apply: function() {
       // used applied element from HTMLImports polyfill or this
       var e = this.__appliedElement || this;
-      // path fixup iff necessary
-      if (!this.__appliedElement) {
-        e.textContent = styleUtil.resolveCss(e.textContent, e.ownerDocument);
-      }
       if (this.include) {
         e.textContent += styleUtil.cssFromModules(this.include);
       }

diff --git a/src/lib/style-util.html b/src/lib/style-util.html
@@ -104,14 +104,18 @@
       // support lots of ways to discover css...
       _cssFromElement: function(element) {
         var cssText = '';
+        // if element is a template, get content from its .content
+        var content = element.content || element;
+        var sourceDoc = element.ownerDocument;
         var e$ = Array.prototype.slice.call(
-          element.querySelectorAll(this.MODULE_STYLES_SELECTOR));
-        for (var i=0, e, addModule; i < e$.length; i++) {
+          content.querySelectorAll(this.MODULE_STYLES_SELECTOR));
+        for (var i=0, e, resolveDoc, addModule; i < e$.length; i++) {
           e = e$[i];
+          resolveDoc = sourceDoc;
           addModule = null;
           // look inside templates for elements
           if (e.localName === 'template') {
-            cssText += this._cssFromElement(e.content);
+            cssText += this._cssFromElement(e);
           } else {
             // style elements inside dom-modules will apply to the main document
             // we don't want this, so we remove them here.
@@ -125,10 +129,11 @@
               // TODO(sorvell): plan is to deprecate this way to get styles;
               // remember to add deprecation warning when this is done.
               e = e.import && e.import.body;
+              resolveDoc = e.import;
             }
             // adjust paths in css.
             if (e) {
-              cssText += this.resolveCss(e.textContent, e.ownerDocument);
+              cssText += this.resolveCss(e.textContent, resolveDoc);
             }
           }
           // now support module refs on 'styling' elements

diff --git a/test/unit/custom-style-import.html b/test/unit/custom-style-import.html
@@ -8,7 +8,9 @@
   </template>
 </dom-module>
 
-<style is="custom-style" include="shared-style">
+<link rel="import" href="sub/style-import.html">
+
+<style is="custom-style" include="shared-style style-import">
   :root {
 
     --import-mixin: {

diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
@@ -119,6 +119,8 @@
   <br><br>
   <div id="after"></div>
 
+  <div class="foo"></div>
+
 
   <dom-module id="x-baz">
     <style>
@@ -253,6 +255,12 @@
         assertComputed(document.body, '12px');
       });
 
+      test('style paths in included dom-modules loaded in import', function() {
+        var foo = document.querySelector('.foo');
+        var url = getComputedStyle(foo).backgroundImage;
+        assert.include(url, 'sub/google.png');
+      });
+
     });
 
 

diff --git a/test/unit/styling-remote-elements.html b/test/unit/styling-remote-elements.html
@@ -108,6 +108,7 @@
     <x-child2 class="wide" id="child2"></x-child2>
     <div id="computed" class$="{{computeClass(aClass)}}">Computed</div>
     <content></content>
+    <div id="url" class="foo"></div>
   </template>
 </dom-module>
 <script>

diff --git a/test/unit/styling-remote-module-sheet.html b/test/unit/styling-remote-module-sheet.html
@@ -1,5 +1,7 @@
+<link rel="import" href="sub/style-import.html">
 <dom-module id="remote-styles">
 <template>
+  <style include="style-import"></style>
   <style>
     #simple {
       border: 3px solid orange;

diff --git a/test/unit/styling-remote.html b/test/unit/styling-remote.html
@@ -173,6 +173,12 @@
     assertComputed(order.$.me, '10px');
   });
 
+  test('style paths in included dom-modules loaded in import', function() {
+      var el = styled.$.url;
+      var url = getComputedStyle(el).backgroundImage;
+      assert.include(url, 'sub/google.png');
+    });
+
   // weird check allows testing under HTMLImports polyfill
   if (!window.Polymer || !Polymer.Settings.useNativeShadow) {
 

diff --git a/test/unit/sub/style-import.html b/test/unit/sub/style-import.html
@@ -0,0 +1,11 @@
+<dom-module id="style-import">
+  <template>
+    <style>
+      .foo {
+        height: 2px;
+        border: 1px solid orange;
+        background: url(google.png);
+      }
+    </style>
+  </template>
+</dom-module>