tor-browser

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

flexbox-empty-1g.html (4212B)

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