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

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