[css-variables] Support revert-[layer] in fallbacks
Bug: 1105782
Change-Id: I45a903b1b81b411f17867fc6c311173bd755a7b7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3934282
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1057361}
diff --git a/css/css-variables/revert-in-fallback.html b/css/css-variables/revert-in-fallback.html
new file mode 100644
index 0000000..ae99e51
--- /dev/null
+++ b/css/css-variables/revert-in-fallback.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>CSS Custom Properties: Using revert in fallbacks</title>
+<link rel="help" href="https://drafts.csswg.org/css-variables/#substitute-a-var">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+ body.revert {
+ --x:FAIL;
+ margin: -1px;
+ display: grid;
+
+ --x: var(--unknown, revert);
+ margin: var(--unknown, revert);
+ display: var(--unknown, revert);
+ }
+</style>
+<html>
+ <body>
+ <pre id=out></pre>
+ <script>
+ let body_ua_display = getComputedStyle(document.body).display;
+ let body_ua_margin = getComputedStyle(document.body).margin;
+ document.body.classList.add('revert');
+
+ test((t) => {
+ assert_equals(getComputedStyle(document.body).getPropertyValue('--x'), '');
+ }, 'var(--unknown, revert) in custom property');
+
+ test((t) => {
+ assert_equals(getComputedStyle(document.body).getPropertyValue('margin'), body_ua_margin);
+ }, 'var(--unknown, revert-layer) in shorthand');
+
+ test((x) => {
+ assert_equals(getComputedStyle(document.body).getPropertyValue('margin-left'), body_ua_margin);
+ }, 'var(--unknown, revert-layer) in shorthand observed via longhand');
+
+ test((t) => {
+ assert_equals(getComputedStyle(document.body).getPropertyValue('display'), body_ua_display);
+ }, 'var(--unknown, revert-layer) in longhand');
+ </script>
+ </body>
+</html>
diff --git a/css/css-variables/revert-layer-in-fallback.html b/css/css-variables/revert-layer-in-fallback.html
new file mode 100644
index 0000000..ed20821
--- /dev/null
+++ b/css/css-variables/revert-layer-in-fallback.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>CSS Custom Properties: Using revert-layer in fallbacks</title>
+<link rel="help" href="https://drafts.csswg.org/css-variables/#substitute-a-var">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+@layer {
+ #child {
+ --x:PASS;
+ margin: 1px;
+ padding-left: 1px;
+ }
+}
+@layer {
+ #parent {
+ --x:FAIL;
+ margin: -1px;
+ padding-left: -1px;
+ }
+ #child {
+ --x: var(--unknown, revert-layer);
+ margin: var(--unknown, revert-layer);
+ padding-left: var(--unknown, revert-layer);
+ }
+}
+</style>
+<div id=parent>
+ <div id=child>
+ </div>
+</div>
+<pre id=out>
+</pre>
+<script>
+ test((x) => {
+ assert_equals(getComputedStyle(child).getPropertyValue('--x'), 'PASS');
+ }, 'var(--unknown, revert-layer) in custom property');
+
+ test((x) => {
+ assert_equals(getComputedStyle(child).getPropertyValue('margin'), '1px');
+ }, 'var(--unknown, revert-layer) in shorthand');
+
+ test((x) => {
+ assert_equals(getComputedStyle(child).getPropertyValue('margin-left'), '1px');
+ }, 'var(--unknown, revert-layer) in shorthand observed via longhand');
+
+ test((x) => {
+ assert_equals(getComputedStyle(child).getPropertyValue('padding-left'), '1px');
+ }, 'var(--unknown, revert-layer) in longhand');
+</script>
