tor-browser

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

revert-rule-layer.tentative.html (1058B)

      1 <!DOCTYPE html>
      2 <title>The revert-rule keyword: interaction with @layer</title>
      3 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10443">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 
      7 <style>
      8  @layer {
      9    #test1 {
     10      color: green;
     11    }
     12  }
     13  @layer {
     14    #test1 {
     15      color: red;
     16      color: revert-rule;
     17    }
     18  }
     19 </style>
     20 <div id=test1></div>
     21 <script>
     22  test(() => {
     23    assert_true(CSS.supports('color:revert-rule'));
     24    assert_equals(getComputedStyle(test1).color, 'rgb(0, 128, 0)')
     25  }, 'The revert-rule keyword can cross layers');
     26 </script>
     27 
     28 
     29 <style>
     30  @layer {
     31    #test2 {
     32      color: red;
     33    }
     34  }
     35  @layer {
     36    #test2 {
     37      color: green;
     38    }
     39    #test2 {
     40      color: red;
     41      color: revert-rule;
     42    }
     43  }
     44 </style>
     45 <div id=test2></div>
     46 <script>
     47  test(() => {
     48    assert_true(CSS.supports('color:revert-rule'));
     49    assert_equals(getComputedStyle(test2).color, 'rgb(0, 128, 0)')
     50  }, 'The revert-rule does not unconditionally cross layers');
     51 </script>