tor-browser

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

implicit-nesting.html (1709B)

      1 <!DOCTYPE html>
      2 <title>Implicit nesting</title>
      3 <link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
      4 <link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
      5 <link rel="match" href="implicit-nesting-ref.html">
      6 <style>
      7  .test {
      8    background-color: red;
      9    width: 30px;
     10    height: 30px;
     11    display: grid;
     12  }
     13 
     14  .test-1 {
     15    > div {
     16      background-color: green;
     17    }
     18  }
     19 
     20  .test-2 {
     21    .test-2-child {
     22      background-color: green;
     23    }
     24  }
     25  .test-2-child {
     26    background-color: red;
     27  }
     28 
     29  .test-3-child {
     30    background-color: red;
     31  }
     32  .test-3-child {
     33    .test-3 & {
     34      background-color: green;
     35    }
     36  }
     37 
     38  .test-4 {
     39    :is(&) {
     40      background-color: green;
     41    }
     42  }
     43 
     44  .test-5 {
     45    :is(.test-5, &.does-not-exist) {
     46      background-color: green;
     47    }
     48  }
     49 
     50  .test-6 {
     51    > .foo,.test-6-child,+ .bar {
     52      background-color: green;
     53    }
     54  }
     55 
     56  .test-7 {
     57    > .foo, .bar, + .test-7-sibling {
     58      background-color: green;
     59    }
     60  }
     61 
     62  .test-8 {
     63    > .foo, .test-8-child, + .bar {
     64      background-color: green;
     65    }
     66  }
     67 
     68  body * + * {
     69    margin-top: 8px;
     70  }
     71 </style>
     72 <body>
     73  <p>Tests pass if <strong>block is green</strong></p>
     74  <div class="test test-1"><div></div></div>
     75  <div class="test test-2"><div class="test-2-child"></div></div>
     76  <div class="test test-3"><div class="test-3-child"></div></div>
     77  <div class="test test-4"></div>
     78  <div class="test test-5"><div class="test-5"></div></div>
     79  <div class="test test-6"><div class="test-6-child"></div></div>
     80  <div class="test test-7" style="display:none"></div><div class="test test-7-sibling"></div>
     81  <div class="test test-8"><div class="test-8-child"></div></div>
     82 </body>