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

testing/web-platform/meta/MANIFEST.json

@@ -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": [
     [
      {}
@@ -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",
@@ -525146,6 +525177,30 @@
    "90a089424b1c884a4ce6fe1684eed3ca03055158",
    "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": [
    "bc061780caa0085fca5b003c1aed68c7b162eabd",
    "testharness"

testing/web-platform/tests/css/css-properties-values-api/support/alt/alt.css

@@ -0,0 +1,4 @@
+#target {
+  --reg-alt-non-inherited-url: url(foo.jpg);
+  --reg-alt-non-inherited-func: url("foo.jpg");
+}

testing/web-platform/tests/css/css-properties-values-api/support/alt/alt.js

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

testing/web-platform/tests/css/css-properties-values-api/support/main/main.css

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

testing/web-platform/tests/css/css-properties-values-api/support/main/main.js

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

testing/web-platform/tests/css/css-properties-values-api/url-resolution.tentative.html

@@ -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>