tor-browser

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

flex-basis-intrinsics-001.html (3349B)

      1 <!DOCTYPE html>
      2 <script src='/resources/testharness.js'></script>
      3 <script src='/resources/testharnessreport.js'></script>
      4 <script src='/resources/check-layout-th.js'></script>
      5 <link rel="author" title="David Grogan" href="dgrogan@chromium.org">
      6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">
      7 <meta name="assert" content="flex-basis:min/max/fit-content works in row and column flexboxes when the items have either parallel or orthogonal writing modes" />
      8 
      9 <style>
     10 .inline-block {
     11  float: left;
     12  height: 50px;
     13  width: 50px;
     14  background: blue;
     15 }
     16 
     17 .flexbox {
     18  display: flex;
     19  width: 75px;
     20  height: 75px;
     21  margin-bottom: 50px;
     22 }
     23 
     24 .flex-item {
     25  flex-shrink: 0;
     26  min-width: 0px;
     27  min-height: 0px;
     28  background: green;
     29 }
     30 
     31 .ortho-item {
     32  writing-mode: vertical-rl;
     33 }
     34 
     35 </style>
     36 
     37 <div id=log></div>
     38 
     39 <div class=flexbox>
     40  <div class=flex-item style="flex-basis: min-content;" data-expected-width=50>
     41    <div class=inline-block></div><div class=inline-block></div>
     42  </div>
     43 </div>
     44 
     45 <div class=flexbox>
     46  <div class=flex-item style="flex-basis: max-content; width: 300px;" data-expected-width=100>
     47    <div class=inline-block></div><div class=inline-block></div>
     48  </div>
     49 </div>
     50 
     51 <div class=flexbox>
     52  <div class=flex-item style="flex-basis: fit-content;" data-expected-width=75>
     53    <div class=inline-block></div><div class=inline-block></div>
     54  </div>
     55 </div>
     56 
     57 <div class=flexbox style="flex-flow: column;">
     58  <div class=flex-item style="flex-basis: min-content;" data-expected-height=100>
     59    <div class=inline-block></div><div class=inline-block></div>
     60  </div>
     61 </div>
     62 
     63 <div class=flexbox style="flex-flow: column;">
     64  <div class=flex-item style="flex-basis: max-content;" data-expected-height=100>
     65    <div class=inline-block></div><div class=inline-block></div>
     66  </div>
     67 </div>
     68 
     69 <div class=flexbox style="flex-flow: column;">
     70  <div class=flex-item style="flex-basis: fit-content;" data-expected-height=100>
     71    <div class=inline-block></div><div class=inline-block></div>
     72  </div>
     73 </div>
     74 
     75 <div class=flexbox>
     76  <div class="flex-item ortho-item" style="flex-basis: min-content;" data-expected-width=100>
     77    <div class=inline-block></div><div class=inline-block></div>
     78  </div>
     79 </div>
     80 
     81 <div class=flexbox>
     82  <div class="flex-item ortho-item" style="flex-basis: max-content; width: 300px;" data-expected-width=100>
     83    <div class=inline-block></div><div class=inline-block></div>
     84  </div>
     85 </div>
     86 
     87 <div class=flexbox>
     88  <div class="flex-item ortho-item" style="flex-basis: fit-content;" data-expected-width=100>
     89    <div class=inline-block></div><div class=inline-block></div>
     90  </div>
     91 </div>
     92 
     93 <div class=flexbox style="flex-flow: column;">
     94  <div class="flex-item ortho-item" style="flex-basis: min-content;" data-expected-height=50>
     95    <div class=inline-block></div><div class=inline-block></div>
     96  </div>
     97 </div>
     98 
     99 <div class=flexbox style="flex-flow: column;">
    100  <div class="flex-item ortho-item" style="flex-basis: max-content;" data-expected-height=100>
    101    <div class=inline-block></div><div class=inline-block></div>
    102  </div>
    103 </div>
    104 
    105 <div class=flexbox style="flex-flow: column;">
    106  <div class="flex-item ortho-item" style="flex-basis: fit-content;" data-expected-height=75>
    107    <div class=inline-block></div><div class=inline-block></div>
    108  </div>
    109 </div>
    110 
    111 <script>
    112 checkLayout('.flex-item');
    113 </script>