third_party/WebKit/LayoutTests/fast/multicol/nested-3-multicols-fixed-height.html

   1 <!DOCTYPE html>
   2 <style>
   3     .mc { -webkit-columns:2; -webkit-column-gap:16px; column-fill:auto; padding:0 5px; }
   4 </style>
   5 <p>Below there should be a multicol inside a multicol inside a multicol.</p>
   6 <p>The innermost multicol (papayawhip, thin column rules) should have a total of eight columns and
   7     consist of twelve lines. Each line should have a letter, from A to L, ascendingly.</p>
   8 <p>The middle multicol (salmon, medium column rules) should have four columns. The first line in the
   9     first line should say "middle first". Then comes the inner multicol, followed by the last line
  10     in the last column, which should say "middle last".</p>
  11 <p>The outermost multicol (lime, thick column rules) should have two columns. The first line in the
  12     first column should say "outer first". Then comes the middle (and inner) multicol, followed by
  13     the last line in the last column, which should say "outer last".</p>
  14 <p>Rules should be drawn between columns in the same row.</p>
  15 <div style="line-height:2em; width:572px;">
  16     <div class="mc" style="height:6em; -webkit-column-rule:solid 8px; background:lime;">
  17         outer first
  18         <div class="mc" style="height:8em; -webkit-column-rule:solid 4px; background:salmon;">
  19             middle first
  20             <div class="mc" style="height:12em; -webkit-column-rule:solid 2px; background:papayawhip;">
  21                 A<br>
  22                 B<br>
  23                 C<br>
  24                 D<br>
  25                 E<br>
  26                 F<br>
  27                 G<br>
  28                 H<br>
  29                 I<br>
  30                 J<br>
  31                 K<br>
  32                 L<br>
  33             </div>
  34             middle last
  35         </div>
  36         outer last
  37     </div>
  38 </div>