tor-browser

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

flexbox-single-column-3-ref.html (2098B)

      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 single-line column 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: 190px;
     14    column-width: 40px;
     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    padding-block: 15px;
     20  }
     21  .flexContainer {
     22    background: gray;
     23    box-decoration-break: clone;
     24  }
     25  .gap {
     26    block-size: 5px;
     27  }
     28 
     29  /* Note: flex items are in visual order as "CMYK": cyan, magenta, yellow, black. */
     30  header {
     31    background: cyan;
     32    block-size: 50px;
     33  }
     34  nav, article, footer {
     35    inline-size: 30px;
     36  }
     37  nav {
     38    background: magenta;
     39    block-size: 25px;
     40  }
     41  article {
     42    background: yellow;
     43    block-size: 25px;
     44    position: relative;
     45    inset-inline-start: 5px;
     46  }
     47  footer {
     48    background: black;
     49    block-size: 50px;
     50    position: relative;
     51    inset-inline-start: 10px;
     52  }
     53  </style>
     54 
     55  <body>
     56    <!-- Test a container with margin-block-start. -->
     57    <div class="multicol">
     58      <div class="flexContainer" style="margin-block-start: 25px">
     59        <header></header><nav></nav><article></article><footer></footer>
     60      </div>
     61    </div>
     62 
     63    <!-- Test a container not at the top of the column/page. -->
     64    <div class="multicol">
     65      <div style="block-size: 25px"></div>
     66      <div class="flexContainer">
     67        <header></header><nav></nav><article></article><footer></footer>
     68      </div>
     69    </div>
     70 
     71    <!-- Test a container with row-gap. -->
     72    <div class="multicol">
     73      <div class="flexContainer">
     74        <header></header><div class="gap"></div><nav></nav><div class="gap"></div><article></article><div class="gap"></div><footer></footer>
     75      </div>
     76    </div>
     77  </body>
     78 </html>