tor-browser

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

flexbox-empty-2-ref.html (4903B)

      1 <!DOCTYPE html>
      2 <!-- Any copyright is dedicated to the Public Domain.
      3     http://creativecommons.org/publicdomain/zero/1.0/ -->
      4 <!-- Testcase for how we fragment an empty fixed-height flex container, with
      5     margin/border/padding that are larger than the available height,
      6     and with the flex container having "flex-direction: row".
      7 -->
      8 <html>
      9  <head>
     10    <style>
     11    .multicol {
     12      height: 10px;
     13      width: 100px;
     14      column-width: 20px;
     15      column-fill: auto;
     16      border: 2px solid orange;
     17      margin-bottom: 2px;
     18    }
     19    .flexContainer {
     20      background: teal;
     21      /* border-width is 0 by default; some sub-testcases will increase it. */
     22      border: 0 dashed black;
     23    }
     24    </style>
     25  </head>
     26  <body>
     27    <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
     28    <!-- =================================== -->
     29    <!-- margin-top is the available height: -->
     30    <div class="multicol">
     31      <div class="flexContainer" style="height: 8px;
     32                                        margin-top: 10px"></div>
     33    </div>
     34 
     35    <!-- margin-top is larger than available height: -->
     36    <div class="multicol">
     37      <div class="flexContainer" style="height: 8px;
     38                                        margin-top: 11px"></div>
     39    </div>
     40 
     41    <!-- margin-bottom is exactly the available height: -->
     42    <div class="multicol">
     43      <div class="flexContainer" style="height: 8px;
     44                                        margin-bottom: 10px"></div>
     45    </div>
     46 
     47    <!-- margin-bottom is larger than available height: -->
     48    <div class="multicol">
     49      <div class="flexContainer" style="height: 8px;
     50                                        margin-bottom: 11px"></div>
     51    </div>
     52 
     53    <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
     54    <!-- =================================== -->
     55    <!-- border-top-width is the available height: -->
     56    <div class="multicol">
     57      <div class="flexContainer" style="height: 8px;
     58                                        border-top-width: 10px"></div>
     59    </div>
     60 
     61    <!-- border-top-width is larger than available height: -->
     62    <div class="multicol">
     63      <div class="flexContainer" style="height: 8px;
     64                                        border-top-width: 11px"></div>
     65    </div>
     66 
     67    <!-- border-bottom-width is exactly the available height: -->
     68    <div class="multicol">
     69      <div class="flexContainer" style="height: 8px;
     70                                        border-bottom-width: 10px"></div>
     71    </div>
     72 
     73    <!-- border-bottom-width is larger than available height: -->
     74    <div class="multicol">
     75      <div class="flexContainer" style="height: 8px;
     76                                        border-bottom-width: 11px"></div>
     77    </div>
     78 
     79    <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
     80    <!-- ==================================== -->
     81    <!-- padding-top is the available height: -->
     82    <div class="multicol">
     83      <div class="flexContainer" style="height: 8px;
     84                                        padding-top: 10px"></div>
     85    </div>
     86 
     87    <!-- padding-top is larger than available height: -->
     88    <div class="multicol">
     89      <div class="flexContainer" style="height: 8px;
     90                                        padding-top: 11px"></div>
     91    </div>
     92 
     93    <!-- padding-bottom is exactly the available height: -->
     94    <div class="multicol">
     95      <div class="flexContainer" style="height: 8px;
     96                                        padding-bottom: 10px"></div>
     97    </div>
     98 
     99    <!-- padding-bottom is larger than available height: -->
    100    <div class="multicol">
    101      <div class="flexContainer" style="height: 8px;
    102                                        padding-bottom: 11px"></div>
    103    </div>
    104 
    105    <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
    106    <!-- =========================================== -->
    107    <!-- border+padding-top is the available height: -->
    108    <div class="multicol">
    109      <div class="flexContainer" style="height: 8px;
    110                                        border-top: 5px;
    111                                        padding-top: 5px"></div>
    112    </div>
    113 
    114    <!-- padding-top is larger than available height: -->
    115    <div class="multicol">
    116      <div class="flexContainer" style="height: 8px;
    117                                        border-top: 6px;
    118                                        padding-top: 6px"></div>
    119    </div>
    120 
    121    <!-- padding-bottom is exactly the available height: -->
    122    <div class="multicol">
    123      <div class="flexContainer" style="height: 8px;
    124                                        border-bottom: 5px;
    125                                        padding-bottom: 5px"></div>
    126    </div>
    127 
    128    <!-- padding-bottom is larger than available height: -->
    129    <div class="multicol">
    130      <div class="flexContainer" style="height: 8px;
    131                                        border-bottom: 6px;
    132                                        padding-bottom: 6px"></div>
    133    </div>
    134 
    135  </body>
    136 </html>