tor-browser

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

contain-size-block-003.html (2785B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <title>CSS Test: 'contain: size' on 'overflow:auto' block elements should cause them to be sized as if they had no contents</title>
      6  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
      7  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
      8  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
      9  <link rel="match" href="contain-size-block-003-ref.html">
     10  <style>
     11  .contain {
     12    contain: size;
     13    overflow: auto;
     14    border: 2px solid green;
     15  }
     16  .innerContents {
     17    color: transparent;
     18    height: 100px;
     19    width: 100px;
     20  }
     21  .minHeight {
     22    min-height: 60px;
     23    background: lightblue;
     24  }
     25  .height {
     26    height: 60px;
     27    background: lightblue;
     28  }
     29  .maxWidth {
     30    max-width: 60px;
     31  }
     32  .width {
     33    width: 60px;
     34  }
     35  .floatLBasic {
     36    float: left;
     37  }
     38  .floatLWidth {
     39    float: left;
     40    width: 60px;
     41  }
     42  .flexBaselineCheck {
     43    display: flex;
     44    align-items: baseline;
     45  }
     46  </style>
     47 </head>
     48 <body>
     49  <!-- NOTE: In all cases below, the expectation is that the size-contained
     50       element should be sized as if it had no contents (while honoring
     51       whatever sizing properties are provided). -->
     52 
     53  <!--CSS Test: A size-contained scrollable block with no specified size.-->
     54  <div class="contain"><div class="innerContents">inner</div></div>
     55  <br>
     56 
     57  <!--CSS Test: A size-contained scrollable block with specified min-height -->
     58  <div class="contain minHeight"><div class="innerContents">inner</div></div>
     59  <br>
     60 
     61  <!--CSS Test: A size-contained scrollable block with specified height -->
     62  <div class="contain height"><div class="innerContents">inner</div></div>
     63  <br>
     64 
     65  <!--CSS Test: A size-contained scrollable block with specified max-width -->
     66  <div class="contain maxWidth"><div class="innerContents">inner</div></div>
     67  <br>
     68 
     69  <!--CSS Test: A size-contained scrollable block with specified width -->
     70  <div class="contain width"><div class="innerContents">inner</div></div>
     71  <br>
     72 
     73  <!--CSS Test: A size-contained floated scrollable block with auto size -->
     74  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>
     75  <br>
     76 
     77  <!--CSS Test: A size-contained floated scrollable block with
     78      specified width -->
     79  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>
     80  <br>
     81 
     82  <!--CSS Test: A size-contained scrollable block in a
     83      baseline-aligning flex container: should size as if it's empty, but
     84      still baseline-align using its contents' baseline -->
     85  <div class="flexBaselineCheck">
     86    outside before
     87    <div class="contain">
     88      <div class="innerContents">inner</div>
     89    </div>
     90    outside after
     91  </div>
     92 </body>
     93 </html>