tor-browser

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

flexbox-baseline-multi-line-horiz-003-ref.html (2411B)

      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  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     10  <meta charset="utf-8">
     11  <style>
     12    /* We use an outer vertical flex container, wrapping two single-line
     13       flex containers, to match the testcase's multi-line flex container. */
     14    .outerFlexContainer {
     15      height: 100px;
     16      background: lightgray;
     17      display: inline-flex;
     18      flex-direction: column;
     19      justify-content: center; /* to mimic testcase's "align-content:center" */
     20    }
     21    .flexContainer {
     22      display: flex;
     23      width: 40px;
     24    }
     25    .flexContainer > * {
     26      width: 20px;
     27    }
     28 
     29    .smallFont {
     30      font-size: 8px;
     31      line-height: 8px;
     32    }
     33    .medFont {
     34      font-size: 12px;
     35      line-height: 12px;
     36    }
     37    .bigFont {
     38      font-size: 16px;
     39      line-height: 16px;
     40    }
     41  </style>
     42 </head>
     43 <body>
     44  a
     45  <!-- Flex container with second item in first line baseline-aligned
     46       (should set the container's baseline) -->
     47  <div class="outerFlexContainer">
     48    <div class="flexContainer">
     49      <div class="medFont">b</div>
     50      <div class="bigFont" style="align-self: baseline">c</div>
     51    </div>
     52    <div class="flexContainer">
     53      <div class="medFont">d</div>
     54      <div class="smallFont">e</div>
     55    </div>
     56  </div>
     57 
     58  <!-- Flex container with both items in first line baseline-aligned
     59       (should set the container's baseline) -->
     60  <div class="outerFlexContainer">
     61    <div class="flexContainer">
     62      <div class="smallFont" style="align-self: baseline">f</div>
     63      <div class="medFont" style="align-self: baseline">g</div>
     64    </div>
     65    <div class="flexContainer">
     66      <div class="bigFont">h</div>
     67      <div class="smallFont">i</div>
     68    </div>
     69  </div>
     70 
     71  <!-- Flex container with all items baseline-aligned
     72       (only those on first line should set the container's baseline) -->
     73  <div class="outerFlexContainer">
     74    <div class="flexContainer" style="align-items: baseline">
     75      <div class="bigFont">j</div>
     76      <div class="smallFont" style="padding-bottom: 20px">k</div>
     77    </div>
     78    <div class="flexContainer" style="align-items: baseline">
     79      <div class="smallFont">l</div>
     80      <div class="medFont">m</div>
     81    </div>
     82  </div>
     83  n
     84 </body>
     85 </html>