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

   1 <!DOCTYPE html>
   2 <style>
   3     .mc { box-sizing:border-box; padding:0 5px; }
   4     .column { float:left; width:calc(50% - 8px); height:100%; }
   5     .gap { float:left; width:16px; height:100%; }
   6     .outer { background:lime; }
   7     .middle { background:salmon; }
   8     .inner { background:papayawhip; }
   9     .outer > .gap::before { display:block; margin:auto; border-left:8px solid; width:0; height:100%; content:""; }
  10     .middle > .gap::before { display:block; margin:auto; border-left:4px solid; width:0; height:100%; content:""; }
  11     .inner > .gap::before { display:block; margin:auto; border-left:2px solid; width:0; height:100%; content:""; }
  12 </style>
  13 <p>Below there should be a multicol inside a multicol inside a multicol.</p>
  14 <p>The innermost multicol (papayawhip, thin column rules) should have a total of eight columns and
  15     consist of twelve lines. Each line should have a letter, from A to L, ascendingly.</p>
  16 <p>The middle multicol (salmon, medium column rules) should have four columns. The first line in the
  17     first line should say "middle first". Then comes the inner multicol, followed by the last line
  18     in the last column, which should say "middle last".</p>
  19 <p>The outermost multicol (lime, thick column rules) should have two columns. The first line in the
  20     first column should say "outer first". Then comes the middle (and inner) multicol, followed by
  21     the last line in the last column, which should say "outer last".</p>
  22 <p>Rules should be drawn between columns in the same row.</p>
  23 <div style="line-height:2em; width:572px;">
  24     <div class="mc outer" style="height:6em;">
  25         <div class="column">
  26             outer first
  27             <div class="mc middle" style="height:4em;">
  28                 <div class="column">
  29                     middle first
  30                     <div class="mc inner" style="height:2em;">
  31                         <div class="column">
  32                             A<br>
  33                         </div>
  34                         <div class="gap"></div>
  35                         <div class="column">
  36                             B<br>
  37                         </div>
  38                     </div>
  39                 </div>
  40                 <div class="gap"></div>
  41                 <div class="column">
  42                     <div class="mc inner" style="height:4em;">
  43                         <div class="column">
  44                             C<br>
  45                             D<br>
  46                         </div>
  47                         <div class="gap"></div>
  48                         <div class="column">
  49                             E<br>
  50                             F<br>
  51                         </div>
  52                     </div>
  53                 </div>
  54             </div>
  55         </div>
  56         <div class="gap"></div>
  57         <div class="column">
  58             <div class="mc middle" style="height:4em;">
  59                 <div class="column">
  60                     <div class="mc inner" style="height:4em;">
  61                         <div class="column">
  62                             G<br>
  63                             H<br>
  64                         </div>
  65                         <div class="gap"></div>
  66                         <div class="column">
  67                             I<br>
  68                             J<br>
  69                         </div>
  70                     </div>
  71                 </div>
  72                 <div class="gap"></div>
  73                 <div class="column">
  74                     <div class="mc inner" style="height:2em;">
  75                         <div class="column">
  76                             K<br>
  77                         </div>
  78                         <div class="gap"></div>
  79                         <div class="column">
  80                             L<br>
  81                         </div>
  82                     </div>
  83                     middle last
  84                 </div>
  85             </div>
  86             outer last
  87         </div>
  88     </div>
  89 </div>