tor-browser

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

flexbox-justify-content-horiz-001a.xhtml (4236B)


      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 a series of horizontal flex containers, testing each
      7     possible value of the 'justify-content' property. -->
      8 <html xmlns="http://www.w3.org/1999/xhtml">
      9  <head>
     10    <title>CSS Test: Testing 'justify-content' in a horizontal flex container</title>
     11    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     12    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
     13    <link rel="match" href="flexbox-justify-content-horiz-001-ref.xhtml"/>
     14    <style>
     15      div.flexbox {
     16        width: 200px;
     17        display: flex;
     18        margin-bottom: 2px;
     19      }
     20      div.a {
     21        height: 10px;
     22        flex: 0 10px;
     23        background: lightgreen;
     24      }
     25      div.b {
     26        height: 10px;
     27        flex: 0 50px;
     28        background: pink;
     29      }
     30      div.c {
     31        height: 10px;
     32        flex: 0 100px;
     33        background: orange;
     34      }
     35    </style>
     36  </head>
     37  <body>
     38 
     39    <!-- default (start) -->
     40    <div class="flexbox">
     41      <div class="a"/>
     42    </div>
     43    <div class="flexbox">
     44      <div class="a"/><div class="b"></div>
     45    </div>
     46    <div class="flexbox">
     47      <div class="a"/><div class="b"/><div class="c"/>
     48    </div>
     49 
     50    <!-- flex-start -->
     51    <div class="flexbox" style="justify-content: flex-start">
     52      <div class="a"/>
     53    </div>
     54    <div class="flexbox" style="justify-content: flex-start">
     55      <div class="a"/><div class="b"/>
     56    </div>
     57    <div class="flexbox" style="justify-content: flex-start">
     58      <div class="a"/><div class="b"/><div class="c"/>
     59    </div>
     60 
     61    <!-- flex-end -->
     62    <div class="flexbox" style="justify-content: flex-end">
     63      <div class="a"/>
     64    </div>
     65    <div class="flexbox" style="justify-content: flex-end">
     66      <div class="a"/><div class="b"/>
     67    </div>
     68    <div class="flexbox" style="justify-content: flex-end">
     69      <div class="a"/><div class="b"/><div class="c"/>
     70    </div>
     71 
     72    <!-- center -->
     73    <div class="flexbox" style="justify-content: center">
     74      <div class="a"/>
     75    </div>
     76    <div class="flexbox" style="justify-content: center">
     77      <div class="a"/><div class="b"/>
     78    </div>
     79    <div class="flexbox" style="justify-content: center">
     80      <div class="a"/><div class="b"/><div class="c"/>
     81    </div>
     82 
     83    <!-- space-between -->
     84    <div class="flexbox" style="justify-content: space-between">
     85      <div class="a"/>
     86    </div>
     87    <div class="flexbox" style="justify-content: space-between">
     88      <div class="a"/><div class="b"/>
     89    </div>
     90    <div class="flexbox" style="justify-content: space-between">
     91      <div class="a"/><div class="b"/><div class="c"/>
     92    </div>
     93 
     94    <!-- space-around -->
     95    <div class="flexbox" style="justify-content: space-around">
     96      <div class="a"/>
     97    </div>
     98    <div class="flexbox" style="justify-content: space-around">
     99      <div class="a"/><div class="b"/>
    100    </div>
    101    <div class="flexbox" style="justify-content: space-around">
    102      <div class="a"/><div class="b"/><div class="c"/>
    103    </div>
    104 
    105    <!-- space-evenly -->
    106    <div class="flexbox" style="justify-content: space-evenly">
    107      <div class="a"/>
    108    </div>
    109    <div class="flexbox" style="justify-content: space-evenly">
    110      <div class="a"/><div class="b"/>
    111    </div>
    112    <div class="flexbox" style="justify-content: space-evenly">
    113      <div class="a"/><div class="b"/><div class="c"/>
    114    </div>
    115 
    116    <!-- left -->
    117    <div class="flexbox" style="justify-content: left">
    118      <div class="a"/>
    119    </div>
    120    <div class="flexbox" style="justify-content: left">
    121      <div class="a"/><div class="b"/>
    122    </div>
    123    <div class="flexbox" style="justify-content: left">
    124      <div class="a"/><div class="b"/><div class="c"/>
    125    </div>
    126 
    127    <!-- right -->
    128    <div class="flexbox" style="justify-content: right">
    129      <div class="a"/>
    130    </div>
    131    <div class="flexbox" style="justify-content: right">
    132      <div class="a"/><div class="b"/>
    133    </div>
    134    <div class="flexbox" style="justify-content: right">
    135      <div class="a"/><div class="b"/><div class="c"/>
    136    </div>
    137 
    138  </body>
    139 </html>