tor-browser

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

flexbox-mbp-horiz-003-reverse-ref.xhtml (2312B)

      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 <html xmlns="http://www.w3.org/1999/xhtml">
      7  <head>
      8    <title>CSS Reftest Reference</title>
      9    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     10    <style>
     11      div { height: 20px; border: 0; }
     12      div.flexbox {
     13        width: 200px;
     14        margin-bottom: 2px;
     15      }
     16 
     17      <!-- customizations for flexbox border/padding -->
     18      .borderA {
     19        border-style: dashed;
     20        border-color: purple;
     21        border-top-width: 6px;
     22        border-right-width: 4px;
     23        border-bottom-width: 2px;
     24        border-left-width: 8px;
     25      }
     26 
     27      .borderB {
     28        border-style: dashed;
     29        border-color: purple;
     30        border-top-width: 4px;
     31        border-right-width: 5px;
     32        border-bottom-width: 6px;
     33        border-left-width: 7px;
     34      }
     35 
     36      .paddingA {
     37        padding: 4px 3px 2px 1px;
     38      }
     39 
     40      .paddingB {
     41        padding: 8px 11px 14px 17px;
     42      }
     43 
     44      div.child1 {
     45        display: inline-block;
     46        width: 74px;
     47        background: lightgreen;
     48        border-style: dotted;
     49        border-left-width: 2px;
     50        border-right-width: 4px;
     51      }
     52      div.child2 {
     53        display: inline-block;
     54        width: 110px;
     55        background: yellow;
     56        border-style: dashed;
     57        border-left-width: 7px;
     58        border-right-width: 3px;
     59      }
     60    </style>
     61  </head>
     62  <body>
     63    <div class="flexbox borderA"
     64         ><div class="child2"/><div class="child1"/></div>
     65    <div class="flexbox borderA paddingA"
     66         ><div class="child2"/><div class="child1"/></div>
     67    <div class="flexbox borderA paddingB"
     68         ><div class="child2"/><div class="child1"/></div>
     69    <div class="flexbox borderB"
     70         ><div class="child2"/><div class="child1"/></div>
     71    <div class="flexbox borderB paddingA"
     72         ><div class="child2"/><div class="child1"/></div>
     73    <div class="flexbox borderB paddingB"
     74         ><div class="child2"/><div class="child1"/></div>
     75    <div class="flexbox paddingA"
     76         ><div class="child2"/><div class="child1"/></div>
     77    <div class="flexbox paddingB"
     78         ><div class="child2"/><div class="child1"/></div>
     79  </body>
     80 </html>