layout/reftests/flexbox/pagination/flexbox-empty-1d.html

   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: column-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: column-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>