tor-browser

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

flexbox-flex-basis-content-001-ref.html (2008B)

      1 <!DOCTYPE html>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html>
      7 <head>
      8  <title>CSS Reftest Reference</title>
      9  <meta charset="utf-8">
     10  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     11  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
     12  <style>
     13  .container {
     14    display: flex;
     15    flex-direction: row;
     16    justify-content: space-between;
     17    border: 2px solid purple;
     18    padding: 2px;
     19    margin-bottom: 2em;
     20    height: 50px;
     21    width: 200px;
     22  }
     23 
     24  .container > * {
     25    flex-shrink: 0;
     26    min-width: 0;
     27    border: 2px solid teal;
     28  }
     29 
     30  .smallText { font: 10px Ahem; }
     31  .bigText   { font: 20px Ahem; }
     32  .spacerChild::before {
     33    content: '';
     34    display: block;
     35    background: brown;
     36    height: 10px;
     37    width: 10px;
     38  }
     39  .justPadding {
     40    /* Empty div with 5px padding on each side */
     41    padding: 5px;
     42    background: cyan;
     43  }
     44  canvas { background: fuchsia }
     45  </style>
     46 </head>
     47 <body>
     48 <!-- Flex items have unspecified size properties: -->
     49 <div class="container">
     50  <div class="smallText">a b</div>
     51  <div class="bigText">c</div>
     52  <div class="spacerChild"></div>
     53  <div class="justPadding"></div>
     54  <canvas width="20"></canvas>
     55 </div>
     56 
     57 <!-- Various specified main-size values, in testcase
     58     (removed here in reference case, because they shouldn't affect sizing): -->
     59 <div class="container">
     60  <div class="smallText">a b</div>
     61  <div class="bigText">c</div>
     62  <div class="spacerChild"></div>
     63  <div class="justPadding"></div>
     64  <canvas width="20"></canvas>
     65 </div>
     66 
     67 <!-- Various specified cross-size values (should be honored): -->
     68 <div class="container">
     69  <div class="smallText"    style="height: 0px">a b</div>
     70  <div class="bigText"      style="height: 40px">c</div>
     71  <div class="spacerChild"  style="height: 20px"></div>
     72  <div class="justPadding"  style="height: 10px"></div>
     73  <canvas width="20"        style="height: 8px"></canvas>
     74 </div>
     75 
     76 </body>
     77 </html>