[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}

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