tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

revert-layer-in-fallback.html (1305B)

      1 <!DOCTYPE html>
      2 <title>CSS Custom Properties: Using revert-layer in fallbacks</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-variables/#substitute-a-var">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <style>
      7 @layer {
      8  #child {
      9    --x:PASS;
     10    margin: 1px;
     11    padding-left: 1px;
     12  }
     13 }
     14 @layer {
     15  #parent {
     16    --x:FAIL;
     17    margin: -1px;
     18    padding-left: -1px;
     19  }
     20  #child {
     21    --x: var(--unknown, revert-layer);
     22    margin: var(--unknown, revert-layer);
     23    padding-left: var(--unknown, revert-layer);
     24  }
     25 }
     26 </style>
     27 <div id=parent>
     28  <div id=child>
     29  </div>
     30 </div>
     31 <pre id=out>
     32 </pre>
     33 <script>
     34  test((x) => {
     35    assert_equals(getComputedStyle(child).getPropertyValue('--x'), 'PASS');
     36  }, 'var(--unknown, revert-layer) in custom property');
     37 
     38  test((x) => {
     39    assert_equals(getComputedStyle(child).getPropertyValue('margin'), '1px');
     40  }, 'var(--unknown, revert-layer) in shorthand');
     41 
     42  test((x) => {
     43    assert_equals(getComputedStyle(child).getPropertyValue('margin-left'), '1px');
     44  }, 'var(--unknown, revert-layer) in shorthand observed via longhand');
     45 
     46  test((x) => {
     47    assert_equals(getComputedStyle(child).getPropertyValue('padding-left'), '1px');
     48  }, 'var(--unknown, revert-layer) in longhand');
     49 </script>