tor-browser

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

contain-size-063.html (2008B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>CSS Containment Test: 'contain: size' affects intrinsic size</title>
      4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
      5 <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
      6 <link rel="match" href="reference/contain-size-063-ref.html">
      7 <meta name="asserts" content="the intrinsic size of a size-contained element is treated as 0 in various scenarios involving intrinsic sizing.">
      8 
      9 <style>
     10 .red {
     11    background: red;
     12 }
     13 .abs {
     14    position: absolute;
     15 }
     16 .float {
     17    float: left;
     18 }
     19 .zero {
     20    width: 0;
     21 }
     22 .contained {
     23    contain: size;
     24    color: transparent;
     25 }
     26 .grid {
     27    display: grid;
     28    grid: max-content auto / min-content auto;
     29 }
     30 table {
     31    border-collapse: collapse;
     32 }
     33 td {
     34    padding: 0;
     35 }
     36 </style>
     37 
     38 <p>Test passes if there is no red below.
     39 
     40 <!-- max content sized-->
     41 <div class="red abs"><div class="contained">Arbitrary content content<br>that takes up size.<br>Block Layout</div></div>
     42 
     43 <!-- max content sized-->
     44 <div class="red float"><div class="contained">Arbitrary content content<br>that takes up size.<br>Float</div></div>
     45 
     46 <!-- min content sized-->
     47 <div class=zero><div class="red float"><div class="contained">Arbitrary content content<br>that takes up size.<br>Float in narrow wrapper</div></div></div>
     48 
     49 <div class="grid red">
     50    <div class="red"></div>
     51    <div class="contained">Arbitrary content content<br>that takes up size.<br>Grid item giving the first row it's height</div>
     52    <div class="contained">Arbitrary content content<br>that takes up size.<br>Grid item giving the first column its width</div>
     53 </div>
     54 
     55 <table class=red>
     56    <tr>
     57        <td class=red>
     58        <td><div class="contained">Arbitrary content content<br>that takes up size.<br>content of a table cell giving the fist row it's height</div>
     59    <tr>
     60        <td><div class="contained">Arbitrary content content<br>that takes up size.<br>content of a table cell giving the first column it's width</div>
     61 </div>