tor-browser

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

flexbox-single-column-vertical-lr-3-ref.html (2142B)

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