tor-browser

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

flexbox-mbp-horiz-004-ref.xhtml (2379B)

      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 <!-- Reference case - identical to the testcase, but with with the flex items'
      7     margin and padding values set to explicit pixel values.
      8 -->
      9 <html xmlns="http://www.w3.org/1999/xhtml">
     10  <head>
     11    <title>CSS Reftest Reference</title>
     12    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     13    <style>
     14      div { border: 0; }
     15      div.flexbox {
     16        width: 200px;
     17        display: flex;
     18        margin-bottom: 2px;
     19        border: 1px dotted black;
     20      }
     21      div.height50 { height: 50px; }
     22 
     23      .marginA  { margin:  20px 16px 12px  8px; }
     24      .marginB  { margin:  16px 20px 24px 28px; }
     25      .paddingA { padding: 16px 12px  8px  4px; }
     26      .paddingB { padding: 12px 16px 20px 24px; }
     27 
     28 
     29      div.child1 {
     30        flex: none;
     31        width: 10px;
     32        height: 10px;
     33        background: lightgreen;
     34      }
     35      div.child2 {
     36        flex: none;
     37        width: 10px;
     38        height: 10px;
     39        background: purple;
     40      }
     41 
     42      div.filler {
     43        /* Filler-div to fill up content-box and make padding easier to see. */
     44        height: 10px;
     45        width: 100%;
     46        background: lightgrey;
     47      }
     48 
     49    </style>
     50  </head>
     51  <body>
     52    <div class="flexbox"
     53         ><div class="child1 paddingA"><div class="filler"/></div
     54         ><div class="child2 paddingB"><div class="filler"/></div
     55         ><div class="child1 marginA"></div
     56         ><div class="child2 marginB"></div
     57    ></div>
     58 
     59    <div class="flexbox height50"
     60         ><div class="child1 paddingA"><div class="filler"/></div
     61         ><div class="child2 paddingB"><div class="filler"/></div
     62         ><div class="child1 marginA"></div
     63         ><div class="child2 marginB"></div
     64    ></div>
     65 
     66    <div class="flexbox height50" style="align-items: flex-end"
     67         ><div class="child1 paddingA"><div class="filler"/></div
     68         ><div class="child2 paddingB"><div class="filler"/></div
     69         ><div class="child1 marginA"></div
     70         ><div class="child2 marginB"></div
     71    ></div>
     72 
     73    <div class="flexbox height50"
     74         ><div class="child1 paddingA marginA"><div class="filler"/></div
     75         ><div class="child2 paddingB marginB"><div class="filler"/></div
     76    ></div>
     77  </body>
     78 </html>