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

   1 <!DOCTYPE html>
   2 <style>
   3     .multicol {
   4         width: 330px;
   5         height: 200px;
   6         border: 3px solid #bbb;
   7         -webkit-column-gap: 10px;
   8         -webkit-column-count: 2;
   9         line-height: 20px;
  10     }
  11     .left, .right {
  12         padding: 5px 5px;
  13         background-color: steelblue;
  14     }
  15     .float_content {
  16         background-color: skyblue;
  17     }
  18     .left { float: left; }
  19     .right { float: right; }
  20 </style>
  21
  22 <p>There should be two floats: one left, one right. Both should wrap into the
  23    second column. The lines <em>left6</em>, <em>left7</em>,
  24    <em>right6</em>, <em>right7</em> (and their backgrounds) should appear
  25    <em>entirely</em> in the second column.</p>
  26 <div class="multicol">
  27     First<br>
  28     First<br>
  29     First<br>
  30     First<br>
  31     <div class="left">
  32         <span class="float_content">
  33             left1<br>
  34             left2<br>
  35             left3<br>
  36             left4<br>
  37             left5<br>
  38             left6<br>
  39             left7<br>
  40         </span>
  41     </div>
  42     <div class="right">
  43         <span class="float_content">
  44             right1<br>
  45             right2<br>
  46             right3<br>
  47             right4<br>
  48             right5<br>
  49             right6<br>
  50             right7<br>
  51         </span>
  52     </div>
  53     First<br>
  54     First<br>
  55     First<br>
  56     First<br>
  57     First<br>
  58     First<br>
  59
  60
  61     Second<br>
  62     Second<br>
  63     Second<br>
  64     Second<br>
  65     Second<br>
  66     Second<br>
  67     Second<br>
  68     Second<br>
  69     Second<br>
  70     Second<br>
  71 </div>