tor-browser

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

nesting-revert-rule.tentative.html (1984B)

      1 <!DOCTYPE html>
      2 <title>The revert-rule keyword: interaction with nesting</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  :root {
      9    #test1 {
     10      color: green;
     11    }
     12    #test1 {
     13      color: red;
     14      color: revert-rule;
     15    }
     16  }
     17 </style>
     18 <div id=test1></div>
     19 <script>
     20  test(() => {
     21    assert_true(CSS.supports('color:revert-rule'));
     22    assert_equals(getComputedStyle(test1).color, 'rgb(0, 128, 0)')
     23  }, 'The revert-rule keyword can revert to a nested rule');
     24 </script>
     25 
     26 
     27 <style>
     28  :root {
     29    #test2 {
     30      /* CSSNestedDeclarationsRule { */
     31        color: green;
     32      /* } */
     33      & {
     34        color: red;
     35        color: revert-rule;
     36      }
     37    }
     38  }
     39 </style>
     40 <div id=test2></div>
     41 <script>
     42  test(() => {
     43    assert_true(CSS.supports('color:revert-rule'));
     44    assert_equals(getComputedStyle(test2).color, 'rgb(0, 128, 0)')
     45  }, 'The revert-rule keyword can revert to a CSSNestedDeclarationsRule');
     46 </script>
     47 
     48 
     49 <style>
     50  :root {
     51    #test3 {
     52      /* CSSNestedDeclarationsRule { */
     53        color: green;
     54      /* } */
     55      .something {}
     56      /* CSSNestedDeclarationsRule { */
     57        color: red;
     58        color: revert-rule;
     59      /* } */
     60    }
     61  }
     62 </style>
     63 <div id=test3></div>
     64 <script>
     65  test(() => {
     66    assert_true(CSS.supports('color:revert-rule'));
     67    assert_equals(getComputedStyle(test3).color, 'rgb(0, 128, 0)')
     68  }, 'The revert-rule keyword can revert from a CSSNestedDeclarationsRule');
     69 </script>
     70 
     71 
     72 <style>
     73  @scope (#test4) {
     74    /* CSSNestedDeclarationsRule { */
     75      color: green;
     76    /* } */
     77  }
     78 
     79  #test4 {
     80    color: red;
     81    color: revert-rule;
     82  }
     83 </style>
     84 <div id=test4></div>
     85 <script>
     86  test(() => {
     87    assert_true(CSS.supports('color:revert-rule'));
     88    assert_equals(getComputedStyle(test4).color, 'rgb(0, 128, 0)')
     89  }, 'The revert-rule keyword can revert to scoped declarations');
     90 </script>