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