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

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