tor-browser

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

flexbox-mbp-horiz-001-rtl-reverse.xhtml (2242B)

      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 borders on flex items, and "direction: rtl" and
      7     "flex-direction: row-reverse" to *doubly* reverse the flex container's
      8     main axis. -->
      9 <html xmlns="http://www.w3.org/1999/xhtml">
     10  <head>
     11    <title>CSS Test: Testing borders on flex items in a row-reverse horizontal flex container, with 'direction: rtl'</title>
     12    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     13    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
     14    <link rel="match" href="flexbox-mbp-horiz-001-ref.xhtml"/>
     15    <style>
     16      div { height: 100px; border: 0; }
     17      div.flexbox {
     18        width: 200px;
     19        font-size: 10px;
     20        display: flex;
     21        flex-direction: row-reverse;
     22        direction: rtl;
     23      }
     24      div.a {
     25        flex: 1 0 24px;
     26        background: lightgreen;
     27        border-style: dotted;
     28        border-left-width: 2px;
     29        border-right-width: 4px;
     30      }
     31      div.b {
     32        flex: 2 0 10px;
     33        background: yellow;
     34        border-style: dashed;
     35        border-left-width: 7px;
     36        border-right-width: 3px;
     37      }
     38      div.c {
     39        flex: 3 0 40px;
     40        background: orange;
     41      }
     42      div.flexNone {
     43        flex: none;
     44        background: pink;
     45      }
     46      div.flexBasis {
     47        flex: 0 0 20px;
     48        background: gray;
     49      }
     50      div.spacer {
     51        display: inline-block;
     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>