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

   1 <!DOCTYPE html>
   2 <style>
   3     .multicol {
   4         width: 500px;
   5         height: 200px;
   6         border: 3px solid black;
   7         -webkit-column-gap: 10px;
   8         -webkit-column-count: 3;
   9         line-height: 20px;
  10     }
  11     .left, .right {
  12         padding: 10px 0;
  13         width: 40px;
  14         text-align: center;
  15         box-sizing: border-box;
  16     }
  17     .left { float: left; }
  18     .right { float: right; }
  19     .tall { height: 220px; }
  20     .xtall { height: 420px; }
  21     .blue1 { background-color: skyblue; }
  22     .blue2 { background-color: dodgerblue; }
  23     .blue3 { background-color: steelblue; }
  24 </style>
  25
  26 <p>There should be three tall floats, each of which should extend
  27    into the next column (F2, F3) or into all columns (F1).</p>
  28 <div class="multicol">
  29     First<br>
  30     First<br>
  31     <div class="right tall blue1">F2</div>
  32     First<br>
  33     First<br>
  34     <div class="left xtall blue2">F1</div>
  35     First<br>
  36     First<br>
  37     First<br>
  38     First<br>
  39     First<br>
  40     First<br>
  41
  42     Second<br>
  43     Second<br>
  44     <div class="left tall blue3">F3</div>
  45     Second<br>
  46     Second<br>
  47     Second<br>
  48     Second<br>
  49     Second<br>
  50     Second<br>
  51     Second<br>
  52
  53     Third<br>
  54     Third<br>
  55     Third<br>
  56     Third<br>
  57     Third<br>
  58     Third<br>
  59     Third<br>
  60     Third<br>
  61     Third<br>
  62     Third<br>
  63 </div>