Fixes #2251: resolve imported stylesheets against correct document.

src/lib/style-util.html

@@ -129,7 +129,7 @@
               // 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;
+              resolveDoc = e.ownerDocument;
             }
             // adjust paths in css.
             if (e) {

test/unit/styling-remote-elements.html

@@ -53,6 +53,7 @@
 
 <dom-module id="x-styled">
   <link rel="import" type="css" href="styling-remote-sheet.css">
+  <link rel="import" type="css" href="sub/remote-sheet.css">
   <style>
     @media(max-width: 10000px) {
       .media {
@@ -109,6 +110,7 @@
     <div id="computed" class$="{{computeClass(aClass)}}">Computed</div>
     <content></content>
     <div id="url" class="foo"></div>
+    <div id="bg" class="bg"></div>
   </template>
 </dom-module>
 <script>

test/unit/styling-remote.html

@@ -174,10 +174,16 @@
   });
 
   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');
-    });
+    var el = styled.$.url;
+    var url = getComputedStyle(el).backgroundImage;
+    assert.include(url, 'sub/google.png');
+  });
+
+  test('paths in remote sheets using custom properties', function() {
+    var el = styled.$.bg;
+    var url = getComputedStyle(el).backgroundImage;
+    assert.include(url, 'sub/foo.png');
+  });
 
   // weird check allows testing under HTMLImports polyfill
   if (!window.Polymer || !Polymer.Settings.useNativeShadow) {
@@ -190,7 +196,7 @@
 
       test('styles shimmed in registration order', function() {
         var s$ = document.head.querySelectorAll('style[scope]');
-        var expected = ['x-order', 'x-child2', 'x-styled', 'x-button', 'x-dynamic-scope'];
+        var expected = ['x-order', 'x-child2', 'x-styled', 'x-styled-0', 'x-button', 'x-dynamic-scope'];
         var actual = [];
         for (var i=0; i<s$.length; i++) {
           actual.push(s$[i].getAttribute('scope'));

test/unit/sub/remote-sheet.css

@@ -0,0 +1,7 @@
+:host {
+  --background-image: url(foo.png);
+}
+
+.bg {
+  background-image: var(--background-image);
+}