tor-browser

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

flex-basis-1.html (1798B)

      1 <!DOCTYPE html>
      2 <link rel="help"
      3  href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
      4 <script src='/resources/testharness.js'></script>
      5 <script src='/resources/testharnessreport.js'></script>
      6 <script src="/resources/check-layout-th.js"></script>
      7 <meta name="assert"
      8  content="stretch as a flex basis accounts for the item's margins">
      9 
     10 <style>
     11  .flexbox {
     12    display: flex;
     13    width: 100px;
     14  }
     15 
     16  .item {
     17    flex: 0 1 stretch;
     18    background: lime;
     19  }
     20 
     21  .grandchild {
     22    width: 30px;
     23    height: 50px;
     24  }
     25 
     26  p {
     27    margin-bottom: 4px;
     28  }
     29 </style>
     30 
     31 <body onload="checkLayout('.item')">
     32 
     33  <p>basic:</p>
     34  <div class="flexbox">
     35    <div class="item" style="outline: 5px solid;"
     36      data-expected-client-width="100">
     37      <div class="grandchild"></div>
     38    </div>
     39  </div>
     40 
     41  <p>With border:</p>
     42  <div class="flexbox">
     43    <div class="item" style="border: 5px solid;"
     44      data-expected-client-width="90">
     45      <div class="grandchild"></div>
     46    </div>
     47  </div>
     48 
     49  <p>With border+margin:</p>
     50  <div class="flexbox">
     51    <div class="item" style="border: 5px solid; margin-right: 20px;"
     52      data-expected-client-width="70">
     53      <div class="grandchild"></div>
     54    </div>
     55  </div>
     56 
     57  <p>flex-basis:stretch items can still shrink:</p>
     58  <div class="flexbox">
     59    <div class="item" style="outline: 5px solid;"
     60      data-expected-client-width="50">
     61      <div class="grandchild"></div>
     62    </div>
     63    <div style="flex-basis: 100px"></div>
     64  </div>
     65 
     66  <p>column flexbox has indefinite height so flex-basis:stretch behaves as
     67    flex-basis:content</p>
     68  <div class="flexbox" style="flex-direction: column;">
     69    <div class="item" style="outline: 5px solid; min-height: 0px;"
     70      data-expected-client-height="50">
     71      <div class="grandchild"></div>
     72    </div>
     73  </div>