Bug 1507239 [wpt PR 14055] - [css-properties-values-api] Validate var() fallbacks., a=testonly

Automatic update from web-platform-tests[css-properties-values-api] Validate var() fallbacks.

According to a recent spec edit, any fallback in a var()-reference must
match the syntax of the referenced property, otherwise the var()-reference
is invalid. This applies even if the fallback is not used.

To implement this, ResolveFallback now returns kNone/kFail/kSuccess instead
of a bool. This is necessary, because the kNone case may be both an error
state and a success state, depending on whether the fallback is being
used or not, hence a plain bool is not sufficient.

R=futhark@chromium.org

Bug: 641877
Change-Id: I951eef6335bf1cd4064d59959d73ec4fa39c9ee0
Reviewed-on: https://chromium-review.googlesource.com/c/1335576
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Anders Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608365}

--

wpt-commits: 4bf9cbfa246859a47e46507154760526e48f8af0
wpt-pr: 14055

testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html

@@ -2,6 +2,7 @@
 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="./resources/utils.js"></script>
 <style>
 div {
     --registered-length-1: 10px;
@@ -135,4 +136,38 @@ test(function(){
     element.style = '';
 }, 'Lists with relative units are absolutized when substituting');
 
+function test_valid_fallback(syntax, value, fallback) {
+    test(function(){
+        let name = generate_property(syntax);
+        try {
+            element.style = `${name}: ${value}; --x:var(${name},${fallback})`;
+            let computedStyle = getComputedStyle(element);
+            assert_equals(computedStyle.getPropertyValue('--x'), value);
+        } finally {
+            element.style = '';
+        }
+    }, `Valid fallback does not invalidate var()-reference [${syntax}, ${fallback}]`);
+}
+
+function test_invalid_fallback(syntax, value, fallback) {
+    test(function(){
+        let name = generate_property(syntax);
+        try {
+            element.style = `${name}: ${value}; --x:var(${name},${fallback})`;
+            let computedStyle = getComputedStyle(element);
+            assert_equals(computedStyle.getPropertyValue('--x'), '');
+        } finally {
+            element.style = '';
+        }
+    }, `Invalid fallback invalidates var()-reference [${syntax}, ${fallback}]`);
+}
+
+test_valid_fallback('<length>', '40px', '10px');
+test_valid_fallback('<length> | <color>', '40px', 'red');
+test_valid_fallback('<length> | none', '40px', 'none');
+
+test_invalid_fallback('<length>', '40px', 'red');
+test_invalid_fallback('<length> | none', '40px', 'nolength');
+test_invalid_fallback('<length>', '40px', 'var(--novar)');
+
 </script>