Skip to content
Browse files

ensure path fixup is applied correctly to styles in templates.

  • Loading branch information...
1 parent f469129 commit b22f3cdaadddcd721f5d25464bd7dbffd546f778 @sorvell sorvell committed
View
4 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);
}
View
13 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
View
4 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: {
View
8 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');
+ });
+
});
View
1 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>
View
2 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;
View
6 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) {
View
11 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>

0 comments on commit b22f3cd

Please sign in to comment.
Something went wrong with that request. Please try again.