Blitz - WPT: revert-rule-in-fallback.html

wpt / css / css-variables / revert-rule-in-fallback.html

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

Subtest	Status	Message
var(--unknown, revert-rule) in custom property	FAIL	assert_equals: expected "PASS" but got "FAIL"
var(--unknown, revert-rule) in shorthand	PASS
var(--unknown, revert-rule) in shorthand observed via longhand	PASS
var(--unknown, revert-rule) in longhand	PASS

Enable JavaScript in test iframe

/css/css-variables/revert-rule-in-fallback.html

<!DOCTYPE html>
<title>CSS Custom Properties: Using revert-rule in fallbacks</title>
<link rel="help" href="https://drafts.csswg.org/css-variables/#substitute-a-var">
<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#revert-rule-keyword">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #child {
    --x:PASS;
    margin: 1px;
    padding-left: 1px;
  }
  #parent {
    --x:FAIL;
    margin: -1px;
    padding-left: -1px;
  }
  #child {
    --x: var(--unknown, revert-rule);
    margin: var(--unknown, revert-rule);
    padding-left: var(--unknown, revert-rule);
  }
</style>
<div id=parent>
  <div id=child>
  </div>
</div>
<pre id=out>
</pre>
<script>
  test((x) => {
    assert_true(CSS.supports('--x:revert-rule'));
    assert_equals(getComputedStyle(child).getPropertyValue('--x'), 'PASS');
  }, 'var(--unknown, revert-rule) in custom property');

  test((x) => {
    assert_true(CSS.supports('margin:revert-rule'));
    assert_equals(getComputedStyle(child).getPropertyValue('margin'), '1px');
  }, 'var(--unknown, revert-rule) in shorthand');

  test((x) => {
    assert_true(CSS.supports('margin-left:revert-rule'));
    assert_equals(getComputedStyle(child).getPropertyValue('margin-left'), '1px');
  }, 'var(--unknown, revert-rule) in shorthand observed via longhand');

  test((x) => {
    assert_true(CSS.supports('padding-left:revert-rule'));
    assert_equals(getComputedStyle(child).getPropertyValue('padding-left'), '1px');
  }, 'var(--unknown, revert-rule) in longhand');
</script>