1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
|
<!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>
|