layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.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 a flex container with a single unbreakable
   5      child, with the flex container having "flex-direction: column" and
   6      "flex-wrap: wrap".
   7 -->
   8 <html>
   9   <head>
  10     <style>
  11     .multicol {
  12       height: 10px;
  13       width: 100px;
  14       column-width: 30px;
  15       column-fill: auto;
  16       border: 2px solid orange;
  17       margin-bottom: 15px; /* (just for spacing between testcases) */
  18     }
  19     .flexContainer {
  20       display: flex;
  21       flex-direction: column;
  22       flex-wrap: wrap;
  23       background: teal;
  24       border: 1px dashed black;
  25     }
  26     .item {
  27       width: 100%;
  28       height: 20px;
  29       flex: none;
  30     }
  31     </style>
  32   </head>
  33   <body>
  34     <!-- auto-height container: -->
  35     <div class="multicol">
  36       <div class="flexContainer">
  37         <img src="" class="item">
  38       </div>
  39     </div>
  40
  41     <!-- fixed-height container, smaller than available height: -->
  42     <div class="multicol">
  43       <div class="flexContainer" style="height: 8px">
  44         <img src="" class="item">
  45       </div>
  46     </div>
  47
  48     <!-- fixed-height container, between available height and child height: -->
  49     <div class="multicol">
  50       <div class="flexContainer" style="height: 15px">
  51         <img src="" class="item">
  52       </div>
  53     </div>
  54
  55     <!-- fixed-height container, same as child height: -->
  56     <div class="multicol">
  57       <div class="flexContainer" style="height: 20px">
  58         <img src="" class="item">
  59       </div>
  60     </div>
  61
  62     <!-- fixed-height container, larger than child height: -->
  63     <div class="multicol">
  64       <div class="flexContainer" style="height: 24px">
  65         <img src="" class="item">
  66       </div>
  67     </div>
  68   </body>
  69 </html>