tor-browser

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

flexbox-basic-block-vert-001v.xhtml (2289B)

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