1 files changed, 49 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-variables/revert-layer-in-fallback.html b/testing/web-platform/tests/css/css-variables/revert-layer-in-fallback.html
new file mode 100644
index 0000000000..ed20821fb9
--- /dev/null
+++ b/testing/web-platform/tests/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>