diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js index e3b78d9..f55a02a 100644 --- a/src/ShadowCSS.js +++ b/src/ShadowCSS.js @@ -148,6 +148,8 @@ */ (function(scope) { +var loader = scope.loader; + var ShadowCSS = { strictStyling: false, registry: {}, @@ -603,12 +605,15 @@ if (window.ShadowDOMPolyfill) { var style = elt; if (!elt.hasAttribute('nopolyfill')) { if (elt.__resource) { - style = doc.createElement('style'); - style.textContent = elt.__resource; + style = elt.ownerDocument.createElement('style'); + style.textContent = Platform.loader.resolveUrlsInCssText( + elt.__resource, elt.href); // remove links from main document if (elt.ownerDocument === doc) { elt.parentNode.removeChild(elt); } + } else { + Platform.loader.resolveUrlsInStyle(style); } var styles = [style]; style.textContent = ShadowCSS.stylesToShimmedCssText(styles, styles); diff --git a/src/loader.js b/src/loader.js index a1ec8ac..7d428d0 100644 --- a/src/loader.js +++ b/src/loader.js @@ -79,6 +79,35 @@ function createStyleElement(cssText, scope) { return style; } +// TODO(sorvell): integrate a real URL polyfill, this is cribbed from +// https://github.com/arv/DOM-URL-Polyfill/blob/master/src/url.js. +// NOTE: URL seems difficult to polyfill since chrome and safari implement +// it but only chrome's appears to work. +function getUrl(base, url) { + url = url || '' + var doc = document.implementation.createHTMLDocument(''); + if (base) { + var baseElement = doc.createElement('base'); + baseElement.href = base; + doc.head.appendChild(baseElement); + } + var anchorElement = doc.createElement('a'); + anchorElement.href = url; + doc.body.appendChild(anchorElement); + return anchorElement; +} + +// TODO(sorvell): factor path fixup for easier reuse; parts are currently +// needed by HTMLImports and ShadowDOM style shimming. +function resolveUrlsInCssText(cssText, url) { + return HTMLImports.path.resolveUrlsInCssText(cssText, + getUrl(url)); +} + +function resolveUrlsInStyle(style) { + return HTMLImports.path.resolveUrlsInStyle(style); +} + // TODO(sorvell): use a common loader shared with HTMLImports polyfill // currently, this just loads the first @import per style element // and does not recurse into loaded elements; we'll address this with a @@ -88,6 +117,7 @@ function polyfillLoadStyle(style, callback) { HTMLImports.xhr.load(atImportUrlFromStyle(style), function (err, resource, url) { replaceAtImportWithCssText(this, url, resource); + this.textContent = resolveUrlsInCssText(this.textContent, url); callback && callback(this); }, style); } @@ -105,6 +135,9 @@ function replaceAtImportWithCssText(style, url, cssText) { style.textContent = style.textContent.replace(re, cssText); } +// exports +loader.resolveUrlsInCssText = resolveUrlsInCssText; +loader.resolveUrlsInStyle = resolveUrlsInStyle; scope.loader = loader; })(window.Platform);