tor-browser

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

flexbox-empty-2c.html (4957B)

      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: column".
      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      display: flex;
     21      flex-direction: column;
     22      background: teal;
     23      /* border-width is 0 by default; some sub-testcases will increase it. */
     24      border: 0 dashed black;
     25    }
     26    </style>
     27  </head>
     28  <body>
     29    <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
     30    <!-- =================================== -->
     31    <!-- margin-top is the available height: -->
     32    <div class="multicol">
     33      <div class="flexContainer" style="height: 8px;
     34                                        margin-top: 10px"></div>
     35    </div>
     36 
     37    <!-- margin-top is larger than available height: -->
     38    <div class="multicol">
     39      <div class="flexContainer" style="height: 8px;
     40                                        margin-top: 11px"></div>
     41    </div>
     42 
     43    <!-- margin-bottom is exactly the available height: -->
     44    <div class="multicol">
     45      <div class="flexContainer" style="height: 8px;
     46                                        margin-bottom: 10px"></div>
     47    </div>
     48 
     49    <!-- margin-bottom is larger than available height: -->
     50    <div class="multicol">
     51      <div class="flexContainer" style="height: 8px;
     52                                        margin-bottom: 11px"></div>
     53    </div>
     54 
     55    <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
     56    <!-- =================================== -->
     57    <!-- border-top-width is the available height: -->
     58    <div class="multicol">
     59      <div class="flexContainer" style="height: 8px;
     60                                        border-top-width: 10px"></div>
     61    </div>
     62 
     63    <!-- border-top-width is larger than available height: -->
     64    <div class="multicol">
     65      <div class="flexContainer" style="height: 8px;
     66                                        border-top-width: 11px"></div>
     67    </div>
     68 
     69    <!-- border-bottom-width is exactly the available height: -->
     70    <div class="multicol">
     71      <div class="flexContainer" style="height: 8px;
     72                                        border-bottom-width: 10px"></div>
     73    </div>
     74 
     75    <!-- border-bottom-width is larger than available height: -->
     76    <div class="multicol">
     77      <div class="flexContainer" style="height: 8px;
     78                                        border-bottom-width: 11px"></div>
     79    </div>
     80 
     81    <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
     82    <!-- ==================================== -->
     83    <!-- padding-top is the available height: -->
     84    <div class="multicol">
     85      <div class="flexContainer" style="height: 8px;
     86                                        padding-top: 10px"></div>
     87    </div>
     88 
     89    <!-- padding-top is larger than available height: -->
     90    <div class="multicol">
     91      <div class="flexContainer" style="height: 8px;
     92                                        padding-top: 11px"></div>
     93    </div>
     94 
     95    <!-- padding-bottom is exactly the available height: -->
     96    <div class="multicol">
     97      <div class="flexContainer" style="height: 8px;
     98                                        padding-bottom: 10px"></div>
     99    </div>
    100 
    101    <!-- padding-bottom is larger than available height: -->
    102    <div class="multicol">
    103      <div class="flexContainer" style="height: 8px;
    104                                        padding-bottom: 11px"></div>
    105    </div>
    106 
    107    <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
    108    <!-- =========================================== -->
    109    <!-- border+padding-top is the available height: -->
    110    <div class="multicol">
    111      <div class="flexContainer" style="height: 8px;
    112                                        border-top: 5px;
    113                                        padding-top: 5px"></div>
    114    </div>
    115 
    116    <!-- padding-top is larger than available height: -->
    117    <div class="multicol">
    118      <div class="flexContainer" style="height: 8px;
    119                                        border-top: 6px;
    120                                        padding-top: 6px"></div>
    121    </div>
    122 
    123    <!-- padding-bottom is exactly the available height: -->
    124    <div class="multicol">
    125      <div class="flexContainer" style="height: 8px;
    126                                        border-bottom: 5px;
    127                                        padding-bottom: 5px"></div>
    128    </div>
    129 
    130    <!-- padding-bottom is larger than available height: -->
    131    <div class="multicol">
    132      <div class="flexContainer" style="height: 8px;
    133                                        border-bottom: 6px;
    134                                        padding-bottom: 6px"></div>
    135    </div>
    136 
    137  </body>
    138 </html>