Bug 1507239 [wpt PR 14055] - [css-properties-values-api] Validate var() fallbacks., a=testonly
authorAnders Hartvoll Ruud <andruud@chromium.org>
Mon, 19 Nov 2018 18:45:15 +0000
changeset 506757 26acff6758762dcda5c01d7170e309a440dd8c2f
parent 506756 2536ee5129c2493caab9c597651cafa1d64a3260
child 506758 bad0f7aa87afbea9f3bc26c6ede635855807a2fa
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1507239, 14055, 641877, 1335576, 608365
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
--- a/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html
+++ b/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html
@@ -1,12 +1,13 @@
 <!DOCTYPE HTML>
 <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;
     --registered-length-2: var(--registered-length-1);
     --registered-length-3: var(--length-1);
     --registered-length-4: calc(var(--length-1) + 40px);
     --registered-length-5: var(--invalid, 70px);
     --registered-length-6: calc(var(--registered-length-3)*4);
@@ -130,9 +131,43 @@ test(function(){
         inherits: false
     });
     element.style = 'font-size: 11px; --length-calc-list: 10em, calc(10em + 10px); --unregistered:var(--length-calc-list);';
     let computedStyle = getComputedStyle(element);
     assert_equals(computedStyle.getPropertyValue('--unregistered'), '110px, 120px');
     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>