Merge pull request #4533 from Polymer/4532-kschaaf-resolve-url

Use `_importPath` in `resolveUrl` so it available early. Fixes #4532

src/standard/resolveUrl.html

@@ -21,7 +21,7 @@
      * @return {string} Rewritten URL relative to the import
      */
     resolveUrl: function(url) {
-      return Polymer.ResolveUrl.resolveUrl(url, this.importPath);
+      return Polymer.ResolveUrl.resolveUrl(url, this._importPath);
     }
 
   });

test/unit/resolveurl.html

@@ -71,19 +71,29 @@
 
       test('Urls in styles and attributes', function() {
         var el = document.createElement('p-r');
-        var rx = /sub\/foo\.z/;
-        assert.match(el._styles[0].textContent, rx, 'url not relative to main document');
-        assert.match(el.$.div.getAttribute('style'), rx, 'style url not relative to main document');
-        assert.match(el.$.img.src, rx, 'src url not relative to main document');
-        assert.match(el.$.a.href, rx, 'href url not relative to main document');
-        assert.match(el.$.zonk.getAttribute('url'), rx, 'url url not relative to main document');
-        assert.notMatch(el.$.rel.href, rx, 'relative href url not relative to main document');
-        assert.match(el.$.rel.href, /\?123$/, 'relative href does not preserve query string');
+        var expected = document.baseURI.replace(/[?#].*$/, '');
+        expected = expected.split('/');
+        expected.pop();
+        var expectedRoot = expected.join('/') + '/foo.z';
+        var expectedImport = expected.join('/') + '/sub/foo.z';
+        var style = el._styles[0];
+        assert.isTrue(style.textContent.indexOf(expectedImport) >= 0, 'url not relative to main document');
+        assert.isTrue(el.$.div.getAttribute('style').indexOf(expectedImport) >= 0, 'style url not relative to main document');
+        assert.equal(el.$.img.src, expectedImport, 'src url not relative to main document');
+        assert.equal(el.$.a.href, expectedImport, 'href url not relative to main document');
+        assert.equal(el.$.import.getAttribute('url'), expectedImport, 'url url not relative to main document');
+        assert.equal(el.$.resolveUrl.getAttribute('url'), expectedImport, 'url url not relative to main document');
+        assert.equal(el.$.rel.href, expectedRoot + '?123', 'relative href url not relative to main document');
         assert.equal(el.$.action.getAttribute('action'), 'foo.z', 'action attribute relativized for incorrect element type');
-        assert.match(el.$.formAction.action, rx, 'action attribute relativized for incorrect element type');
+        assert.equal(el.$.formAction.action, expectedImport, 'action attribute relativized for incorrect element type');
         assert.equal(el.$.hash.getAttribute('href'), '#foo.z', 'hash-only url should not be resolved');
         assert.equal(el.$.absolute.getAttribute('href'), '/foo.z', 'absolute urls should not be resolved');
         assert.equal(el.$.protocol.getAttribute('href'), 'data:foo.z', 'urls with other protocols should not be resolved');
+        el.$.if.render();
+        assert.equal(Polymer.dom(el.root).querySelector('#importIf')
+          .getAttribute('url'), expectedImport, 'url url not relative to main document');
+        assert.equal(Polymer.dom(el.root).querySelector('#resolveUrlIf')
+          .getAttribute('url'), expectedImport, 'url url not relative to main document');
       });
 
       test('resolveUrl api', function() {
@@ -119,25 +129,45 @@
         assert.equal(actual, expected);
       });
 
+      test('resolveUrl used in property default', function() {
+        var el = document.createElement('p-r');
+        var expected = document.baseURI.replace(/[?#].*$/, '');
+        expected = expected.split('/');
+        expected.pop();
+        expected = expected.join('/') + '/sub/foo.png';
+        assert.equal(el.resolvedDefault, expected);
+      });
+
       test('Hybrid: Urls in styles and attributes', function() {
         var el = document.createElement('p-r-hybrid');
         document.body.appendChild(el);
-        var rx = /sub\/foo\.z/;
+        var expected = document.baseURI.replace(/[?#].*$/, '');
+        expected = expected.split('/');
+        expected.pop();
+        var expectedEarlyRoot = 'earlyRootPath/foo.z';
+        var expectedRoot = expected.join('/') + '/foo.z';
+        var expectedImport = expected.join('/') + '/sub/foo.z';
         var style = el._styles[0];
-        assert.match(style.textContent, rx, 'url not relative to main document');
-        assert.match(el.$.div.getAttribute('style'), rx, 'style url not relative to main document');
-        assert.match(el.$.img.src, rx, 'src url not relative to main document');
-        assert.match(el.$.a.href, rx, 'href url not relative to main document');
-        assert.match(el.$.import.getAttribute('url'), rx, 'url url not relative to main document');
-        assert.match(el.$.resolveUrl.getAttribute('url'), rx, 'url url not relative to main document');
-        assert.notMatch(el.$.root.getAttribute('url'), rx, 'url url not relative to main document');
-        assert.notMatch(el.$.rel.href, rx, 'relative href url not relative to main document');
-        assert.match(el.$.rel.href, /\?123$/, 'relative href does not preserve query string');
+        assert.isTrue(style.textContent.indexOf(expectedImport) >= 0, 'url not relative to main document');
+        assert.isTrue(el.$.div.getAttribute('style').indexOf(expectedImport) >= 0, 'style url not relative to main document');
+        assert.equal(el.$.img.src, expectedImport, 'src url not relative to main document');
+        assert.equal(el.$.a.href, expectedImport, 'href url not relative to main document');
+        assert.equal(el.$.import.getAttribute('url'), expectedImport, 'url url not relative to main document');
+        assert.equal(el.$.resolveUrl.getAttribute('url'), expectedImport, 'url url not relative to main document');
+        assert.equal(el.$.root.getAttribute('url'), expectedEarlyRoot, 'url url not relative to main document');
+        assert.equal(el.$.rel.href, expectedRoot + '?123', 'relative href url not relative to main document');
         assert.equal(el.$.action.getAttribute('action'), 'foo.z', 'action attribute relativized for incorrect element type');
-        assert.match(el.$.formAction.action, rx, 'action attribute relativized for incorrect element type');
+        assert.equal(el.$.formAction.action, expectedImport, 'action attribute relativized for incorrect element type');
         assert.equal(el.$.hash.getAttribute('href'), '#foo.z', 'hash-only url should not be resolved');
         assert.equal(el.$.absolute.getAttribute('href'), '/foo.z', 'absolute urls should not be resolved');
         assert.equal(el.$.protocol.getAttribute('href'), 'data:foo.z', 'urls with other protocols should not be resolved');
+        el.$.if.render();
+        assert.equal(Polymer.dom(el.root).querySelector('#importIf')
+          .getAttribute('url'), expectedImport, 'url url not relative to main document');
+        assert.equal(Polymer.dom(el.root).querySelector('#resolveUrlIf')
+          .getAttribute('url'), expectedImport, 'url url not relative to main document');
+        assert.equal(Polymer.dom(el.root).querySelector('#rootIf')
+          .getAttribute('url'), expectedEarlyRoot, 'url url not relative to main document');
         document.body.removeChild(el);
       });
 

test/unit/sub/resolveurl-elements.html

@@ -18,17 +18,31 @@
     <div id="div" class="logo" style="background-image: url(foo.z);"></div>
     <img id="img" src="foo.z">
     <a id="a" href="foo.z">Foo</a>
-    <zonk id="zonk" url="foo.z"></zonk>
+    <zonk id="import" url="foo.z"></zonk>
+    <zonk id="resolveUrl" url$="[[resolveUrl('foo.z')]]"></zonk>
     <a id="rel" href="../foo.z?123">Foo</a>
     <a id="action" action="foo.z">Foo</a>
     <form id="formAction" action="foo.z"></form>
     <a id="hash" href="#foo.z">Foo</a>
     <a id="absolute" href="/foo.z">Foo</a>
     <a id="protocol" href="data:foo.z">Foo</a>
+    <template is="dom-if" if id="if">
+      <zonk id="importIf" url="foo.z"></zonk>
+      <zonk id="resolveUrlIf" url$="[[resolveUrl('foo.z')]]"></zonk>
+    </template>
   </template>
 </dom-module>
 <script>
-  Polymer({is: 'p-r'});
+  Polymer({
+    is: 'p-r',
+    properties: {
+      resolvedDefault: {
+        value: function() {
+          return this.resolveUrl('foo.png');
+        }
+      }
+    }
+  });
 </script>
 
 <dom-module id="p-r-hybrid">
@@ -50,6 +64,11 @@
     <a id="hash" href="#foo.z">Foo</a>
     <a id="absolute" href="/foo.z">Foo</a>
     <a id="protocol" href="data:foo.z">Foo</a>
+    <template is="dom-if" if id="if">
+      <zonk id="importIf" url$="[[importPath]]foo.z"></zonk>
+      <zonk id="resolveUrlIf" url$="[[resolveUrl('foo.z')]]"></zonk>
+      <zonk id="rootIf" url$="[[rootPath]]foo.z"></zonk>
+    </template>
   </template>
 </dom-module>
 <script>