Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-properties-values-api/url-resolution.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#relative-urls" />
<meta name="assert" content="This test verifies that relative URLs in registered properties resolve correctly" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/main/main.js"></script>
<script src="support/alt/alt.js"></script>
<link id="main" rel="stylesheet" type="text/css" href="support/main/main.css" />
<link id="main_utf16be" rel="stylesheet" type="text/css" href="support/main/main.utf16be.css" />
<link id="alt" rel="stylesheet" type="text/css" href="support/alt/alt.css" />
<div id=target>
<div id=inner></div>
</div>
<script>
function parse_url(urlstr) {
urlstr = urlstr.trim();
if (!urlstr.startsWith('url("') || !urlstr.endsWith('")'))
throw 'Unknown url format: ' + urlstr;
return urlstr.slice(5, -2);
}
function get_bg_url(element) {
return parse_url(getComputedStyle(element)['background-image']);
}
function get_bg_urls(element) {
return getComputedStyle(element)['background-image']
.split(',')
.map(x => x.trim())
.map(x => parse_url(x));
}
function assert_base_path_equal(actual, expected) {
let actual_base = new URL(actual).pathname.split('/').slice(0, -1);
let expected_base = new URL(expected).pathname.split('/').slice(0, -1);
assert_equals(actual_base.join('/'), expected_base.join('/'));
}
function assert_base_paths_equal(actual, expected) {
assert_equals(actual.length, expected.length);
for (let i = 0; i < actual.length; i++) {
assert_base_path_equal(actual[i], expected[i]);
}
}
test(function() {
target.style = 'background-image: var(--unreg-url);';
assert_base_path_equal(get_bg_url(target), document.baseURI);
}, 'Unregistered property resolves against document (URL token)');
test(function() {
target.style = 'background-image: var(--unreg-func);';
assert_base_path_equal(get_bg_url(target), document.baseURI);
}, 'Unregistered property resolves against document (URL function)');
test(function() {
target.style = 'background-image: var(--reg-non-inherited-url);';
assert_base_path_equal(get_bg_url(target), main.sheet.href);
}, 'Registered non-inherited <url> resolves against sheet (URL token)');
test(function() {
target.style = 'background-image: var(--reg-non-inherited-func);';
assert_base_path_equal(get_bg_url(target), main.sheet.href);
}, 'Registered non-inherited <url> resolves against sheet (URL function)');
test(function() {
target.style = 'background-image: var(--reg-inherited-url);';
assert_base_path_equal(get_bg_url(target), main.sheet.href);
}, 'Registered inherited <url> resolves against sheet (URL token)');
test(function() {
target.style = 'background-image: var(--reg-inherited-func);';
assert_base_path_equal(get_bg_url(target), main.sheet.href);
}, 'Registered inherited <url> resolves against sheet (URL function)');
test(function() {
inner.style = 'background-image: var(--reg-inherited-url);';
assert_base_path_equal(get_bg_url(inner), main.sheet.href);
}, 'Registered inherited <url> resolves against sheet (Child node, URL token)');
test(function() {
inner.style = 'background-image: var(--reg-inherited-func);';
assert_base_path_equal(get_bg_url(inner), main.sheet.href);
}, 'Registered inherited <url> resolves against sheet (Child node, URL function)');
test(function() {
target.style = 'background-image: var(--reg-ref-to-unreg-url);';
assert_base_path_equal(get_bg_url(target), main.sheet.href);
}, 'Registered property with unregistered var reference resolves against sheet (URL token)');
test(function() {
target.style = 'background-image: var(--reg-ref-to-unreg-func);';
assert_base_path_equal(get_bg_url(target), main.sheet.href);
}, 'Registered property with unregistered var reference resolves against sheet. (URL function)');
test(function() {
target.style = 'background-image: var(--reg-ref-to-reg-url);';
assert_base_path_equal(get_bg_url(target), alt.sheet.href);
}, 'Registered property with registered var reference resolves against sheet of referenced property (URL token)');
test(function() {
target.style = 'background-image: var(--reg-ref-to-reg-func);';
assert_base_path_equal(get_bg_url(target), alt.sheet.href);
}, 'Registered property with registered var reference resolves against sheet of referenced property (URL function)');
test(function() {
target.style = 'background-image: var(--unreg-ref-to-reg-url);';
assert_base_path_equal(get_bg_url(target), alt.sheet.href);
}, 'Unregistered property with registered var reference resolves against sheet of referenced property (URL token)');
test(function() {
target.style = 'background-image: var(--unreg-ref-to-reg-func);';
assert_base_path_equal(get_bg_url(target), alt.sheet.href);
}, 'Unregistered property with registered var reference resolves against sheet of referenced property (URL function)');
test(function() {
target.style = 'background-image: var(--unreg-multi-ref-to-reg-urls);';
assert_base_paths_equal(get_bg_urls(target), [main.sheet.href, alt.sheet.href]);
}, 'Multiple (registered) var reference resolve against respective sheets (URL token)');
test(function() {
target.style = 'background-image: var(--unreg-multi-ref-to-reg-funcs);';
assert_base_paths_equal(get_bg_urls(target), [main.sheet.href, alt.sheet.href]);
}, 'Multiple (registered) var reference resolve against respective sheets (URL function)');
test(function() {
target.style = 'background-image: var(--reg-utf16be-url);';
assert_base_path_equal(get_bg_url(target), main_utf16be.sheet.href);
}, 'Registered UTF16BE-encoded var reference resolve against sheet (URL token)');
test(function() {
target.style = 'background-image: var(--reg-utf16be-func);';
assert_base_path_equal(get_bg_url(target), main_utf16be.sheet.href);
}, 'Registered UTF16BE-encoded var reference resolve against sheet (URL function)');
</script>