tor-browser

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

conditional-rules-ref.html (1269B)

      1 <!DOCTYPE html>
      2 <title>Conditional rules with nesting</title>
      3 <link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
      4 <link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
      5 <style>
      6  .test {
      7    background-color: red;
      8    width: 30px;
      9    height: 30px;
     10    display: grid;
     11  }
     12 
     13  @media (min-width: 10px) {
     14    .test-5 > div {
     15      background-color: green;
     16    }
     17  }
     18 
     19  @media (min-width: 10px) {
     20    .test-6 > div {
     21      background-color: green;
     22    }
     23  }
     24 
     25  @supports (display: grid) {
     26    .test-10 {
     27      background-color: green;
     28    }
     29  }
     30 
     31  @layer {
     32    .test-11 {
     33      background-color: green !important;
     34    }
     35  }
     36 
     37  @scope (.test-12) {
     38    :scope {
     39      background-color: green;
     40    }
     41  }
     42 
     43  div {
     44    container-type: inline-size;
     45  }
     46  @container (width >= 0px) {
     47    .test-13 {
     48      background-color: green;
     49    }
     50  }
     51 
     52  body * + * {
     53    margin-top: 8px;
     54  }
     55 </style>
     56 <body>
     57  <p>Tests pass if <strong>block is green</strong></p>
     58  <div class="test test-5"><div></div></div>
     59  <div class="test test-6"><div></div></div>
     60  <div class="test test-10"><div></div></div>
     61  <div class="test test-11"><div></div></div>
     62  <div class="test"><div class="test-12"></div></div>
     63  <div class="test"><div class="test-13"></div></div>
     64 </body>