src/third_party/WebKit/LayoutTests/fast/multicol/float-break-expected.html

   1 <!DOCTYPE html>
   2 <style>
   3     .multicol {
   4         width: 500px;
   5         height: 200px;
   6         border: 3px solid black;
   7         line-height: 20px;
   8     }
   9     .left, .right {
  10         padding: 10px 0;
  11         width: 40px;
  12         text-align: center;
  13         box-sizing: border-box;
  14     }
  15     .left { float: left; }
  16     .right { float: right; }
  17
  18     .blue1 { background-color: skyblue; }
  19     .blue2 { background-color: dodgerblue; }
  20     .blue3 { background-color: steelblue; }
  21
  22     .column1, .column2, .column3 {
  23         float: left;
  24         width: 160px;
  25     }
  26     .column1, .column2 {
  27         margin-right: 10px;
  28     }
  29
  30     .column1 > .f1 { height: 120px; }
  31     .column1 > .f2 { height: 160px; }
  32
  33     .column2 > .f1 { height: 200px; }
  34     .column2 > .f2 { height: 60px; }
  35     .column2 > .f3 { height: 160px; }
  36
  37     .column3 > .f1 { height: 100px; }
  38     .column3 > .f3 { height: 60px; }
  39
  40 </style>
  41
  42 <p>There should be three tall floats, each of which should extend
  43    into the next column (F2, F3) or into all columns (F1).</p>
  44 <div class="multicol">
  45     <div class="column1">
  46         First<br>
  47         First<br>
  48         <div class="right blue1 f2">F2</div>
  49         First<br>
  50         First<br>
  51         <div class="left blue2 f1">F1</div>
  52         First<br>
  53         First<br>
  54         First<br>
  55         First<br>
  56         First<br>
  57         First<br>
  58     </div>
  59
  60     <div class="column2">
  61         <div class="right blue1 f2"></div>
  62         <div class="left blue2 f1"></div>
  63         Second<br>
  64         Second<br>
  65         <div class="left blue3 f3">F3</div>
  66         Second<br>
  67         Second<br>
  68         Second<br>
  69         Second<br>
  70         Second<br>
  71         Second<br>
  72         Second<br>
  73     </div>
  74
  75     <div class="column3">
  76         <div class="left blue2 f1"></div>
  77         <div class="left blue3 f3"></div>
  78         Third<br>
  79         Third<br>
  80         Third<br>
  81         Third<br>
  82         Third<br>
  83         Third<br>
  84         Third<br>
  85         Third<br>
  86         Third<br>
  87         Third<br>
  88     </div>
  89 </div>