tor-browser

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

flexbox-justify-content-vert-002-ref.xhtml (4290B)


      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.flexbox {
     12        height: 200px;
     13        margin-right: 2px;
     14        border: 1px dotted black;
     15        float: left;
     16      }
     17      div.a {
     18        width: 10px;
     19        height: 10px;
     20        background: lightgreen;
     21        border-style: solid;
     22        border-color:     purple;
     23        border-top-width:    4px;
     24        border-right-width:  3px;
     25        border-bottom-width: 2px;
     26        border-left-width:   1px;
     27        padding: 2px;
     28      }
     29      div.b {
     30        width: 10px;
     31        height: 50px;
     32        background: pink;
     33        padding: 1px 2px 3px 4px;
     34        margin: 5px 4px 3px 2px;
     35      }
     36      div.c {
     37        width: 10px;
     38        height: 100px;
     39        background: orange;
     40        margin: 3px;
     41        margin-top: 6px; /* Increased to counteract for collapsing */
     42        border: 2px dashed teal;
     43      }
     44    </style>
     45  </head>
     46  <body>
     47 
     48    <!-- default (start) -->
     49    <div class="flexbox">
     50      <div class="a"/>
     51    </div>
     52    <div class="flexbox">
     53      <div class="a"/><div class="b"></div>
     54    </div>
     55    <div class="flexbox">
     56      <div class="a"/><div class="b"/><div class="c"/>
     57    </div>
     58 
     59    <!-- flex-start -->
     60    <div class="flexbox">
     61      <div class="a"/>
     62    </div>
     63    <div class="flexbox">
     64      <div class="a"/><div class="b"/>
     65    </div>
     66    <div class="flexbox">
     67      <div class="a"/><div class="b"/><div class="c"/>
     68    </div>
     69 
     70    <!-- flex-end -->
     71    <div class="flexbox">
     72      <div class="a" style="margin-top: 180px"/>
     73    </div>
     74    <div class="flexbox">
     75      <div class="a" style="margin-top: 118px"/><div class="b"/>
     76    </div>
     77    <div class="flexbox">
     78      <div class="a" style="margin-top: 8px"/><div class="b"/><div class="c"/>
     79    </div>
     80 
     81    <!-- center -->
     82    <div class="flexbox">
     83      <div class="a" style="margin-top: 90px"/>
     84    </div>
     85    <div class="flexbox">
     86      <div class="a" style="margin-top: 59px"/><div class="b"/>
     87    </div>
     88    <div class="flexbox">
     89      <div class="a" style="margin-top: 4px"/><div class="b"/><div class="c"/>
     90    </div>
     91 
     92    <!-- space-between -->
     93    <div class="flexbox">
     94      <div class="a"/>
     95    </div>
     96    <div class="flexbox">
     97      <div class="a"/><div style="margin-top: 123px"><div class="b"/></div>
     98    </div>
     99    <div class="flexbox">
    100      <div class="a"
    101           /><div style="margin-top: 9px"><div class="b"/></div
    102            ><div style="margin-top: 10px"><div class="c"/></div>
    103    </div>
    104 
    105    <!-- space-around -->
    106    <div class="flexbox">
    107      <div class="a" style="margin-top: 90px"/>
    108    </div>
    109    <div class="flexbox">
    110      <div class="a" style="margin-top: 29.5px"
    111           /><div style="margin-top: 64px"><div class="b"/></div>
    112    </div>
    113    <div class="flexbox">
    114      <div class="a" style="margin-top: calc(8px / 6)"
    115           /><div style="margin-top: calc(5px + 8px / 3)"><div class="b"/></div
    116            ><div style="margin-top: calc(6px + 8px / 3)"><div class="c"/></div>
    117    </div>
    118 
    119    <!-- space-evenly -->
    120    <div class="flexbox">
    121      <div class="a" style="margin-top: 90px"/>
    122    </div>
    123    <div class="flexbox">
    124      <div class="a" style="margin-top: calc(118px / 3)"
    125           /><div style="margin-top: calc(5px + 118px / 3)"><div class="b"/></div>
    126    </div>
    127    <div class="flexbox">
    128      <div class="a" style="margin-top: 2px"
    129           /><div style="margin-top: 7px"><div class="b"/></div
    130            ><div style="margin-top: 8px"><div class="c"/></div>
    131    </div>
    132 
    133    <!-- left -->
    134    <div class="flexbox">
    135      <div class="a"/>
    136    </div>
    137    <div class="flexbox">
    138      <div class="a"/><div class="b"/>
    139    </div>
    140    <div class="flexbox">
    141      <div class="a"/><div class="b"/><div class="c"/>
    142    </div>
    143 
    144    <!-- right -->
    145    <div class="flexbox">
    146      <div class="a"/>
    147    </div>
    148    <div class="flexbox">
    149      <div class="a"/><div class="b"/>
    150    </div>
    151    <div class="flexbox">
    152      <div class="a"/><div class="b"/><div class="c"/>
    153    </div>
    154 
    155  </body>
    156 </html>