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

   1 <!DOCTYPE html>
   2 <style>
   3     body {
   4         -webkit-writing-mode: vertical-rl;
   5     }
   6     .multicol {
   7         height: 500px;
   8         width: 200px;
   9         border: 3px solid black;
  10         line-height: 20px;
  11     }
  12     .left, .right {
  13         padding: 10px 0;
  14         height: 40px;
  15         text-align: center;
  16         box-sizing: border-box;
  17     }
  18     .left { float: left; }
  19     .right { float: right; }
  20
  21     .blue1 { background-color: skyblue; }
  22     .blue2 { background-color: dodgerblue; }
  23     .blue3 { background-color: steelblue; }
  24
  25     .column1, .column2, .column3 {
  26         float: left;
  27         height: 160px;
  28     }
  29     .column1, .column2 {
  30         margin-bottom: 10px;
  31     }
  32
  33     .column1 > .f1 { width: 120px; }
  34     .column1 > .f2 { width: 160px; }
  35
  36     .column2 > .f1 { width: 200px; }
  37     .column2 > .f2 { width: 60px; }
  38     .column2 > .f3 { width: 160px; }
  39
  40     .column3 > .f1 { width: 100px; }
  41     .column3 > .f3 { width: 60px; }
  42
  43 </style>
  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>