third_party/WebKit/LayoutTests/fast/multicol/tall-line-in-short-block.html

   1 <!DOCTYPE html>
   2 <style>
   3     .kix-paragraphrenderer { position:relative; }
   4     .kix-lineview { position:relative; height:2em; background:blue;}
   5     .kix-lineview-content { position:absolute; }
   6     .doohickey { display:inline-block; height:200em; }
   7     .content { position:relative; display:inline-block; top:-198.5em; }
   8 </style>
   9 <!-- Note that no spec mandates this behavior, but browsers agree here, and printing Google Docs depends on it. -->
  10 <p>Below you should see two blue boxes with the word "PASS" written on them.</p>
  11 <div style="-webkit-columns:4; -webkit-column-gap:0; column-fill:auto; overflow:hidden; width:30em; height:10em; line-height:2em; color:white; background:white;">
  12     <br>
  13     <div class="kix-paragraphrenderer">
  14         <div class="kix-lineview">
  15             <div class="kix-lineview-content">
  16                 <div class="doohickey"></div>
  17                 <div class="content">PASS</div>
  18             </div>
  19         </div>
  20     </div>
  21     <br>
  22     <div class="kix-paragraphrenderer">
  23         <div class="kix-lineview">
  24             <div class="kix-lineview-content">
  25                 <div class="doohickey"></div>
  26                 <div class="content">PASS</div>
  27             </div>
  28         </div>
  29     </div>
  30 </div>