tor-browser

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

flexbox-basic-block-horiz-001v.xhtml (2260B)

      1 <?xml version="1.0" encoding="UTF-8"?>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <!-- Testcase with blocks as flex items in a horizontal flex container, with
      7     various "flex" values and various combinations of the items
      8     and with various writing-modes on the items. -->
      9 <html xmlns="http://www.w3.org/1999/xhtml">
     10  <head>
     11    <title>
     12      CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container
     13      (with various writing-modes on the flex items).
     14    </title>
     15    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     16    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
     17    <link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/>
     18    <style>
     19      div { height: 100px; }
     20      div.flexbox {
     21        border: 1px dashed blue;
     22        width: 200px;
     23        font-size: 10px;
     24        display: flex;
     25      }
     26      div.a {
     27        flex: 1 0 30px;
     28        background: lightgreen;
     29        writing-mode: vertical-lr;
     30      }
     31      div.b {
     32        flex: 2 0 20px;
     33        background: yellow;
     34        writing-mode: vertical-rl;
     35      }
     36      div.c {
     37        flex: 3 0 40px;
     38        background: orange;
     39        writing-mode: sideways-lr;
     40      }
     41      div.flexNone {
     42        flex: none;
     43        background: pink;
     44        writing-mode: vertical-lr;
     45      }
     46      div.flexBasis {
     47        flex: 0 0 20px;
     48        background: gray;
     49        writing-mode: sideways-rl;
     50      }
     51      div.spacer {
     52        width: 15px;
     53        height: 15px;
     54        background: purple;
     55      }
     56    </style>
     57  </head>
     58  <body>
     59    <div class="flexbox"><div class="a"></div><div class="b"/></div>
     60    <div class="flexbox"><div class="a"/><div class="c"/></div>
     61    <div class="flexbox"><div class="a"/>
     62      <div class="flexNone"><div class="spacer"/></div>
     63    </div>
     64    <div class="flexbox"><div class="b"/><div class="c"/></div>
     65    <div class="flexbox"><div class="b"/>
     66      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
     67    </div>
     68 
     69    <div class="flexbox">
     70      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
     71    </div>
     72  </body>
     73 </html>