mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 19:25:43 +00:00
Bug 1470231 [wpt PR 11611] - Correctly resolve relative URLs for registered custom properties., a=testonly
Automatic update from web-platform-testsCorrectly resolve relative URLs for registered custom properties. Relative URLs in registered custom properties must resolve against the base URL of the originating stylesheet. For instance, consider a style- sheet at /style/mystyle.css: --foo: url("myimage.jpg"); And a document at /index.html: <style> background-image: var(--foo); </style> If the property --foo is registered with syntax <url>, then the background- image should be /style/myimage.jpg. This is contrary to non-registered properties, in which case the background-image would be /myimage.jpg. To implement this, this patch scans for URL tokens and 'url('-function tokens after (var-)resolving the registered custom property (see CSSVariableResolver::ResolveCustomProperty). The token containing the relative URL is then rewritten (in-place) to contain an absolute URL instead. To avoid doing unnecessary work, we only scan the token stream if CSSVariableData::needs_variable_resolution_ is set. This is set either if needs_url_resolution_ is set (because var-references could produce relative URLs), or if the token stream contains URL/function-tokens. When a resolved CSSVariableData is created (::CreateResolved), it is assumed that the incoming token stream contains no URLs that need to be resolved. R=futhark@chromium.org, timloh@chromium.org Bug: 851490 Change-Id: I25b1e839fc92eb538f30670fe91fc92a1ad9d5ea Reviewed-on: https://chromium-review.googlesource.com/1109975 Commit-Queue: Anders Ruud <andruud@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#569663} -- wpt-commits: 372c7ad36a7e42a89228aa2bb88b35da5f519fa5 wpt-pr: 11611
This commit is contained in:
parent
098cc69a6c
commit
bf87e037bb
@ -253780,6 +253780,31 @@
|
|||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
|
"css/css-properties-values-api/support/alt/alt.css": [
|
||||||
|
[
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"css/css-properties-values-api/support/alt/alt.js": [
|
||||||
|
[
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"css/css-properties-values-api/support/main/main.css": [
|
||||||
|
[
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"css/css-properties-values-api/support/main/main.js": [
|
||||||
|
[
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"css/css-properties-values-api/support/main/main.utf16be.css": [
|
||||||
|
[
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
],
|
||||||
"css/css-pseudo/META.yml": [
|
"css/css-pseudo/META.yml": [
|
||||||
[
|
[
|
||||||
{}
|
{}
|
||||||
@ -319807,6 +319832,12 @@
|
|||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
|
"css/css-properties-values-api/url-resolution.tentative.html": [
|
||||||
|
[
|
||||||
|
"/css/css-properties-values-api/url-resolution.tentative.html",
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
],
|
||||||
"css/css-properties-values-api/var-reference-registered-properties-cycles.html": [
|
"css/css-properties-values-api/var-reference-registered-properties-cycles.html": [
|
||||||
[
|
[
|
||||||
"/css/css-properties-values-api/var-reference-registered-properties-cycles.html",
|
"/css/css-properties-values-api/var-reference-registered-properties-cycles.html",
|
||||||
@ -525146,6 +525177,30 @@
|
|||||||
"90a089424b1c884a4ce6fe1684eed3ca03055158",
|
"90a089424b1c884a4ce6fe1684eed3ca03055158",
|
||||||
"testharness"
|
"testharness"
|
||||||
],
|
],
|
||||||
|
"css/css-properties-values-api/support/alt/alt.css": [
|
||||||
|
"9497bedbe2a13e5412c6d58fcaccaffce44797ab",
|
||||||
|
"support"
|
||||||
|
],
|
||||||
|
"css/css-properties-values-api/support/alt/alt.js": [
|
||||||
|
"0a9a8e1621ae44a94177d84b0183adfa514c21de",
|
||||||
|
"support"
|
||||||
|
],
|
||||||
|
"css/css-properties-values-api/support/main/main.css": [
|
||||||
|
"d1fa3f542b12beff80a2c157523fd49547f22abe",
|
||||||
|
"support"
|
||||||
|
],
|
||||||
|
"css/css-properties-values-api/support/main/main.js": [
|
||||||
|
"311fa24d3d02518cc9378bab785bf8e49714b78c",
|
||||||
|
"support"
|
||||||
|
],
|
||||||
|
"css/css-properties-values-api/support/main/main.utf16be.css": [
|
||||||
|
"bd7bbb7cfc8ca930399abcf886c3da0d446725eb",
|
||||||
|
"support"
|
||||||
|
],
|
||||||
|
"css/css-properties-values-api/url-resolution.tentative.html": [
|
||||||
|
"2f651c735028307632a6f7fb934e138e626acac7",
|
||||||
|
"testharness"
|
||||||
|
],
|
||||||
"css/css-properties-values-api/var-reference-registered-properties-cycles.html": [
|
"css/css-properties-values-api/var-reference-registered-properties-cycles.html": [
|
||||||
"bc061780caa0085fca5b003c1aed68c7b162eabd",
|
"bc061780caa0085fca5b003c1aed68c7b162eabd",
|
||||||
"testharness"
|
"testharness"
|
||||||
|
@ -0,0 +1,4 @@
|
|||||||
|
#target {
|
||||||
|
--reg-alt-non-inherited-url: url(foo.jpg);
|
||||||
|
--reg-alt-non-inherited-func: url("foo.jpg");
|
||||||
|
}
|
@ -0,0 +1,11 @@
|
|||||||
|
function reg_url(name, inherits) {
|
||||||
|
CSS.registerProperty({
|
||||||
|
name: name,
|
||||||
|
syntax: '<url> | none',
|
||||||
|
inherits: inherits,
|
||||||
|
initialValue: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
reg_url('--reg-alt-non-inherited-url', false);
|
||||||
|
reg_url('--reg-alt-non-inherited-func', false);
|
@ -0,0 +1,22 @@
|
|||||||
|
#target {
|
||||||
|
--unreg-url: url(foo.jpg);
|
||||||
|
--unreg-func: url("foo.jpg");
|
||||||
|
|
||||||
|
--reg-inherited-url: url(foo.jpg);
|
||||||
|
--reg-non-inherited-url: url(foo.jpg);
|
||||||
|
|
||||||
|
--reg-inherited-func: url("foo.jpg");
|
||||||
|
--reg-non-inherited-func: url("foo.jpg");
|
||||||
|
|
||||||
|
--reg-ref-to-unreg-url: var(--unreg-url);
|
||||||
|
--reg-ref-to-unreg-func: var(--unreg-func);
|
||||||
|
|
||||||
|
--reg-ref-to-reg-url: var(--reg-alt-non-inherited-url);
|
||||||
|
--reg-ref-to-reg-func: var(--reg-alt-non-inherited-func);
|
||||||
|
|
||||||
|
--unreg-ref-to-reg-url: var(--reg-alt-non-inherited-url);
|
||||||
|
--unreg-ref-to-reg-func: var(--reg-alt-non-inherited-func);
|
||||||
|
|
||||||
|
--unreg-multi-ref-to-reg-urls: var(--reg-non-inherited-url), var(--reg-alt-non-inherited-url);
|
||||||
|
--unreg-multi-ref-to-reg-funcs: var(--reg-non-inherited-func), var(--reg-alt-non-inherited-func);
|
||||||
|
}
|
@ -0,0 +1,25 @@
|
|||||||
|
function reg_url(name, inherits) {
|
||||||
|
CSS.registerProperty({
|
||||||
|
name: name,
|
||||||
|
syntax: '<url> | none',
|
||||||
|
inherits: inherits,
|
||||||
|
initialValue: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
reg_url('--reg-non-inherited-url', false);
|
||||||
|
reg_url('--reg-non-inherited-func', false);
|
||||||
|
|
||||||
|
reg_url('--reg-inherited-url', true);
|
||||||
|
reg_url('--reg-inherited-func', true);
|
||||||
|
|
||||||
|
reg_url('--reg-ref-to-unreg-url', false);
|
||||||
|
reg_url('--reg-ref-to-unreg-func', false);
|
||||||
|
|
||||||
|
reg_url('--reg-ref-to-reg-url', false);
|
||||||
|
reg_url('--reg-ref-to-reg-func', false);
|
||||||
|
|
||||||
|
reg_url('--reg-merged-func', false);
|
||||||
|
|
||||||
|
reg_url('--reg-utf16be-url', false);
|
||||||
|
reg_url('--reg-utf16be-func', false);
|
Binary file not shown.
@ -0,0 +1,139 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<link rel="author" title="Anders Hartvoll Ruud" href="andruud@chromium.org">
|
||||||
|
<!-- TODO(andruud): Replace help link when spec is updated. -->
|
||||||
|
<link rel="help" href="https://github.com/w3c/css-houdini-drafts/issues/393#issuecomment-294706386" />
|
||||||
|
<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>
|
Loading…
Reference in New Issue
Block a user