tor-browser

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

flexbox-empty-1-ref.html (3419B)

      1 <!DOCTYPE html>
      2 <!-- Any copyright is dedicated to the Public Domain.
      3     http://creativecommons.org/publicdomain/zero/1.0/ -->
      4 <html>
      5  <head>
      6    <style>
      7    .multicol {
      8      height: 10px;
      9      width: 100px;
     10      column-width: 20px;
     11      column-fill: auto;
     12      border: 2px solid orange;
     13    }
     14    .flexContainer {
     15      background: teal;
     16      /* border-width is 0 by default; some sub-testcases will increase it. */
     17      border: 0 dashed black;
     18    }
     19    </style>
     20  </head>
     21  <body>
     22    <!-- NO BORDERS/PADDING -->
     23    <!-- ================== -->
     24    <!-- content fits exactly into 1 column: -->
     25    <div class="multicol">
     26      <div class="flexContainer" style="height: 10px"></div>
     27    </div>
     28 
     29    <!-- content fits, but margin-top pushes it to overflow: -->
     30    <div class="multicol">
     31      <div class="flexContainer" style="height: 9px;
     32                                        margin-top: 2px;"></div>
     33    </div>
     34 
     35    <!-- content is too tall, by 1px: -->
     36    <div class="multicol">
     37      <div class="flexContainer" style="height: 11px"></div>
     38    </div>
     39 
     40    <!-- BORDERS/PADDING ON TOP -->
     41    <!-- ====================== -->
     42    <!-- content fits, but border-top makes us too tall: -->
     43    <div class="multicol">
     44      <div class="flexContainer" style="height: 9px;
     45                                        border-top-width: 2px"></div>
     46    </div>
     47 
     48    <!-- content fits, but padding-top makes us too tall: -->
     49    <div class="multicol">
     50      <div class="flexContainer" style="height: 9px;
     51                                        padding-top: 2px"></div>
     52    </div>
     53 
     54    <!-- content fits, but border/padding-top make us too tall: -->
     55    <div class="multicol">
     56      <div class="flexContainer" style="height: 9px;
     57                                        border-top-width: 1px;
     58                                        padding-top: 1px"></div>
     59    </div>
     60 
     61    <!-- BORDERS/PADDING ON BOTTOM -->
     62    <!-- ========================= -->
     63    <!-- content fits, but border-bottom-width makes us too tall: -->
     64    <div class="multicol">
     65      <div class="flexContainer" style="height: 9px;
     66                                        border-bottom-width: 2px"></div>
     67    </div>
     68 
     69    <!-- content fits, but padding-bottom makes us too tall: -->
     70    <div class="multicol">
     71      <div class="flexContainer" style="height: 9px;
     72                                        padding-bottom: 2px"></div>
     73    </div>
     74 
     75    <!-- content fits, but border/padding-bottom make us too tall: -->
     76    <div class="multicol">
     77      <div class="flexContainer" style="height: 9px;
     78                                        border-bottom-width: 1px;
     79                                        padding-bottom: 1px"></div>
     80    </div>
     81 
     82    <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
     83    <!-- ================================= -->
     84    <!-- content fits, but border-top/bottom combined make us too tall: -->
     85    <div class="multicol">
     86      <div class="flexContainer" style="height: 9px;
     87                                        border-top-width: 1px;
     88                                        border-bottom-width: 1px"></div>
     89    </div>
     90 
     91    <!-- content fits, but padding-top/bottom combined make us too tall: -->
     92    <div class="multicol">
     93      <div class="flexContainer" style="height: 9px;
     94                                        padding-top: 1px;
     95                                        padding-bottom: 1px"></div>
     96    </div>
     97 
     98  </body>
     99 </html>