tor-browser

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

flex-line-003.html (1465B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11784">
      3 <script src='/resources/testharness.js'></script>
      4 <script src='/resources/testharnessreport.js'></script>
      5 <script src="/resources/check-layout-th.js"></script>
      6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
      7 <meta name="assert"
      8  content="width:stretch item stretches to container width during the measure pass; container has definite width">
      9 <style>
     10  .container {
     11    display: flex;
     12    flex-direction: column;
     13    width: 100px;
     14    height: 100px;
     15    border: solid;
     16    flex-wrap: wrap;
     17    /* Prevent the lines from stretching. */
     18    align-content: start;
     19    font: 20px/1 Ahem;
     20  }
     21 
     22  .container>div {
     23    border: 3px solid;
     24  }
     25 
     26  .stretch {
     27    width: -moz-available;
     28    width: -webkit-fill-available;
     29    width: stretch;
     30  }
     31 </style>
     32 
     33 <div class="container">
     34  <div class="stretch" style="height: 75px; border-color: cyan"
     35    data-expected-width="100">a</div>
     36  <div class="stretch" style="height: 75px; border-color: magenta"
     37    data-expected-width="100">b</div>
     38 </div>
     39 <div class="container">
     40  <div class="stretch" style="height: 75px; border-color: cyan"
     41    data-expected-width="156">a</div>
     42  <div style="border-color: orange; width: 150px"></div>
     43  <div class="stretch" style="height: 75px; border-color: magenta"
     44    data-expected-width="100">b</div>
     45 </div>
     46 
     47 <script>
     48  document.fonts.ready.then(() => checkLayout(".stretch"));
     49 </script>