tor-browser

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

contain-size-multicol-003.html (2009B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <title>CSS Test: 'contain: size' on multicol elements should cause them to be sized as if they had no contents</title>
      6  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
      7  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
      8  <link rel="match" href="contain-size-multicol-003-ref.html">
      9  <style>
     10  .contain {
     11    contain: size;
     12    border: 1em solid green;
     13    background: red;
     14    column-count: 3;
     15  }
     16  .innerContents {
     17    color: transparent;
     18    height: 100px;
     19    width: 100px;
     20  }
     21  .col-width {
     22    column-width: 20px;
     23  }
     24  .col-gap {
     25    column-gap: 5px;
     26  }
     27  .flexBaselineCheck {
     28    display: flex;
     29    align-items: baseline;
     30  }
     31  .min {
     32    width: min-content;
     33  }
     34  .max {
     35    width: max-content;
     36  }
     37  </style>
     38 </head>
     39 <body>
     40  <!-- This test verifies that contain:size doesn't interfere with the
     41       determination of a multicol element's baseline. -->
     42  <div class="flexBaselineCheck">
     43    outside before
     44    <div class="contain">
     45      <div class="innerContents">inner</div>
     46    </div>
     47    outside after
     48  </div>
     49  <br>
     50 
     51  <!--The following tests are used to ensure column-gaps and column-widths continue to contribute to the minimum and maximum width of a size-contained multicol element. Each should render as if it had no contents.-->
     52 
     53  <div class="contain min col-width"><div class="innerContents">inner</div></div>
     54  <br>
     55 
     56  <div class="contain max col-width"><div class="innerContents">inner</div></div>
     57  <br>
     58 
     59  <div class="contain min col-gap col-width"><div class="innerContents">inner</div></div>
     60  <br>
     61 
     62  <div class="contain max col-gap col-width"><div class="innerContents">inner</div></div>
     63  <br>
     64 
     65  <div class="min">
     66    <div class="contain">
     67      <div class="innerContents">inner</div>
     68    </div>
     69  </div>
     70  <br>
     71 
     72  <div class="max">
     73    <div class="contain">
     74      <div class="innerContents">inner</div>
     75    </div>
     76  </div>
     77 </body>
     78 </html>