tor-browser

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

flexbox-empty-1b.html (3705B)

      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     various combinations of margin/border/padding helping it to be too tall,
      6     and with the flex container having "flex-direction: row-reverse".
      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    }
     18    .flexContainer {
     19      display: flex;
     20      flex-direction: row-reverse;
     21      background: teal;
     22      /* border-width is 0 by default; some sub-testcases will increase it. */
     23      border: 0 dashed black;
     24    }
     25    </style>
     26  </head>
     27  <body>
     28    <!-- NO BORDERS/PADDING -->
     29    <!-- ================== -->
     30    <!-- content fits exactly into 1 column: -->
     31    <div class="multicol">
     32      <div class="flexContainer" style="height: 10px"></div>
     33    </div>
     34 
     35    <!-- content fits, but margin-top pushes it to overflow: -->
     36    <div class="multicol">
     37      <div class="flexContainer" style="height: 9px;
     38                                        margin-top: 2px;"></div>
     39    </div>
     40 
     41    <!-- content is too tall, by 1px: -->
     42    <div class="multicol">
     43      <div class="flexContainer" style="height: 11px"></div>
     44    </div>
     45 
     46    <!-- BORDERS/PADDING ON TOP -->
     47    <!-- ====================== -->
     48    <!-- content fits, but border-top makes us too tall: -->
     49    <div class="multicol">
     50      <div class="flexContainer" style="height: 9px;
     51                                        border-top-width: 2px"></div>
     52    </div>
     53 
     54    <!-- content fits, but padding-top makes us too tall: -->
     55    <div class="multicol">
     56      <div class="flexContainer" style="height: 9px;
     57                                        padding-top: 2px"></div>
     58    </div>
     59 
     60    <!-- content fits, but border/padding-top make us too tall: -->
     61    <div class="multicol">
     62      <div class="flexContainer" style="height: 9px;
     63                                        border-top-width: 1px;
     64                                        padding-top: 1px"></div>
     65    </div>
     66 
     67    <!-- BORDERS/PADDING ON BOTTOM -->
     68    <!-- ========================= -->
     69    <!-- content fits, but border-bottom-width makes us too tall: -->
     70    <div class="multicol">
     71      <div class="flexContainer" style="height: 9px;
     72                                        border-bottom-width: 2px"></div>
     73    </div>
     74 
     75    <!-- content fits, but padding-bottom makes us too tall: -->
     76    <div class="multicol">
     77      <div class="flexContainer" style="height: 9px;
     78                                        padding-bottom: 2px"></div>
     79    </div>
     80 
     81    <!-- content fits, but border/padding-bottom make us too tall: -->
     82    <div class="multicol">
     83      <div class="flexContainer" style="height: 9px;
     84                                        border-bottom-width: 1px;
     85                                        padding-bottom: 1px"></div>
     86    </div>
     87 
     88    <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
     89    <!-- ================================= -->
     90    <!-- content fits, but border-top/bottom combined make us too tall: -->
     91    <div class="multicol">
     92      <div class="flexContainer" style="height: 9px;
     93                                        border-top-width: 1px;
     94                                        border-bottom-width: 1px"></div>
     95    </div>
     96 
     97    <!-- content fits, but padding-top/bottom combined make us too tall: -->
     98    <div class="multicol">
     99      <div class="flexContainer" style="height: 9px;
    100                                        padding-top: 1px;
    101                                        padding-bottom: 1px"></div>
    102    </div>
    103 
    104  </body>
    105 </html>