tor-browser

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

flexbox-multi-row-1-ref.html (3112B)

      1 <!DOCTYPE html>
      2 <!-- Any copyright is dedicated to the Public Domain.
      3     http://creativecommons.org/publicdomain/zero/1.0/ -->
      4 <html>
      5  <meta charset="utf-8">
      6  <title>CSS Flexbox Test Reference: Fragmentation of multi-line row flex container</title>
      7  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
      8  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
      9 
     10  <style>
     11  .multicol {
     12    block-size: 50px;
     13    inline-size: 200px;
     14    column-width: 60px;
     15    column-fill: auto;
     16    column-gap: 10px;
     17    border: 5px solid orange;
     18    margin-block-end: 5px; /* Just to separate each sub-testcase visually. */
     19  }
     20  .flexContainer {
     21    background: gray;
     22    /* border-width is 0 by default; some sub-testcases will increase it. */
     23    border: 0 solid lightgray;
     24  }
     25  .border-padding {
     26    border-block-width: 10px;
     27    padding-block: 5px;
     28  }
     29  .line {
     30    inline-size: 60px;
     31    block-size: 50px;
     32  }
     33 
     34  header, nav, article, footer {
     35    inline-size: 30px;
     36  }
     37  .with-gap header, .with-gap nav, .with-gap article, .with-gap footer {
     38    inline-size: 25px;
     39  }
     40 
     41  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
     42  header {
     43    background: cyan;
     44    block-size: 50px;
     45    float: left;
     46  }
     47  nav {
     48    background: magenta;
     49    block-size: 25px;
     50    float: right;
     51  }
     52  article {
     53    background: yellow;
     54    block-size: 40px;
     55    float: left;
     56    margin-block-start: 5px;
     57  }
     58  footer {
     59    background: black;
     60    block-size: 50px;
     61    float: right;
     62  }
     63  </style>
     64 
     65  <body>
     66    <!-- Basic one without any margin/border/padding. -->
     67    <div class="multicol">
     68      <div class="flexContainer">
     69        <div class="line"><header></header><nav></nav></div>
     70        <div class="line"><article></article><footer></footer></div>
     71      </div>
     72    </div>
     73 
     74    <!-- Test a container with margin-block-start. -->
     75    <div class="multicol">
     76      <div class="flexContainer" style="margin-block-start: 25px">
     77        <div class="line"><header></header><nav></nav></div>
     78        <div class="line"><article></article><footer></footer></div>
     79      </div>
     80    </div>
     81 
     82    <!-- Test a container not at the top of the column/page. -->
     83    <div class="multicol">
     84      <div style="block-size: 25px"></div>
     85      <div class="flexContainer">
     86        <div class="line"><header></header><nav></nav></div>
     87        <div class="line"><article></article><footer></footer></div>
     88      </div>
     89    </div>
     90 
     91    <!-- Test a container with border and padding. -->
     92    <div class="multicol">
     93      <div class="flexContainer border-padding">
     94        <div class="line"><header></header><nav></nav></div>
     95        <div class="line"><article></article><footer></footer></div>
     96      </div>
     97    </div>
     98 
     99    <!-- Test a container with border, padding, and gap. -->
    100    <div class="multicol">
    101      <div class="flexContainer border-padding with-gap">
    102        <div class="line"><header></header><nav></nav></div>
    103        <div style="block-size: 20px"><!-- row-gap --></div>
    104        <div class="line"><article></article><footer></footer></div>
    105      </div>
    106    </div>
    107  </body>
    108 </html>