Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 14, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/standard/resolveUrl.html
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

});
Expand Down
70 changes: 50 additions & 20 deletions test/unit/resolveurl.html
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be an improvement to fix the rx to help ensure the url is fully resolved correctly and not just that it contains the sub folder.

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);
});

Expand Down
23 changes: 21 additions & 2 deletions test/unit/sub/resolveurl-elements.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down