tor-browser

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

contents-rule.html (2974B)

      1 <!DOCTYPE html>
      2 <html>
      3  <head>
      4    <title>CSS Mixins: The @contents rule</title>
      5    <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#contents-rule">
      6    <script src="/resources/testharness.js"></script>
      7    <script src="/resources/testharnessreport.js"></script>
      8  </head>
      9  <body>
     10 
     11    <style>
     12      @mixin --m1() {
     13        @contents;
     14      }
     15      #e1 {
     16        color: red;
     17        @apply --m1 { color: green; }
     18      }
     19    </style>
     20    <div id="e1">This text should be green.</div>
     21    <script>
     22      test(() => {
     23        let target = document.getElementById('e1');
     24        assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
     25      }, 'Simple @contents with no fallback');
     26    </script>
     27 
     28 
     29    <style>
     30      @mixin --m2() {
     31        @contents
     32      }
     33      #e2 {
     34        color: red;
     35        @apply --m2 { color: green; }
     36      }
     37    </style>
     38    <div id="e2">This text should be green.</div>
     39    <script>
     40      test(() => {
     41        let target = document.getElementById('e2');
     42        assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
     43      }, 'Implicit semicolon after @contents, at end of block');
     44    </script>
     45 
     46 
     47    <style>
     48      @mixin --m3() {
     49        &.a {
     50          @contents { color: blue; }
     51        }
     52      }
     53      .b {
     54        color: red;
     55        @apply --m3 { color: green; }
     56      }
     57    </style>
     58    <div class="a b" id="e3">This text should be green.</div>
     59    <script>
     60      test(() => {
     61        let target = document.getElementById('e3');
     62        assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
     63      }, 'Block in @apply overrides fallback');
     64    </script>
     65 
     66 
     67    <style>
     68      @mixin --m4() {
     69        &.c {
     70          @contents { color: green; }
     71        }
     72      }
     73      .d {
     74        color: red;
     75        @apply --m4;
     76      }
     77    </style>
     78    <div class="c d" id="e4">This text should be green.</div>
     79    <script>
     80      test(() => {
     81        let target = document.getElementById('e4');
     82        assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
     83      }, 'Fallback is used if @apply has no block');
     84    </script>
     85 
     86 
     87    <style>
     88      @mixin --m6() {
     89        @contents { }
     90        color: green;
     91      }
     92      #e6 {
     93        @apply --m6;
     94      }
     95    </style>
     96    <div id="e6">This text should be green.</div>
     97    <script>
     98      test(() => {
     99        let target = document.getElementById('e6');
    100        assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
    101      }, 'Empty @contents block is allowed, but does nothing');
    102    </script>
    103 
    104 
    105    <style>
    106        @mixin --m7() {
    107          @contents;
    108          color: green;
    109        }
    110        #e7 {
    111          @apply --m7 {};
    112        }
    113    </style>
    114    <div id="e7">This text should be green.</div>
    115    <script>
    116      test(() => {
    117        let target = document.getElementById('e7');
    118        assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
    119      }, 'Empty @contents parameter does not crash');
    120    </script>
    121  </body>
    122 </html>