src/third_party/WebKit/LayoutTests/fast/line-grid/line-grid-inside-columns.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <style>
   5 .grid { -webkit-line-grid: simple; -webkit-line-snap: baseline;
   6         font-size:36px; }</style>
   7 </head>
   8 <body>
   9
  10 <div style="height:500px; border:2px solid red; -webkit-column-count:2; column-count:2; column-fill:auto;">
  11 <div class="grid">
  12 <div style="font-size:16px">
  13 All of this text even though it's smaller should be on the 36px
  14 grid. The grid should reset at the top of the second column.<br>
  15 All of this text even though it's smaller should be on the 36px
  16 grid. The grid should reset at the top of the second column.<br>
  17 All of this text even though it's smaller should be on the 36px
  18 grid. The grid should reset at the top of the second column.<br>
  19 </div>
  20 <div style="font-size:24px">
  21 All of this text even though it's smaller should be on the 36px
  22 grid. The grid should reset at the top of the second column.<br>
  23 All of this text even though it's smaller should be on the 36px
  24 grid. The grid should reset at the top of the second column.<br>
  25 All of this text even though it's smaller should be on the 36px
  26 grid. The grid should reset at the top of the second column.<br>
  27 </div>
  28 <div style="font-size:10px">
  29 All of this text even though it's smaller should be on the 36px
  30 grid. The grid should reset at the top of the second column.<br>
  31 All of this text even though it's smaller should be on the 36px
  32 grid. The grid should reset at the top of the second column.<br>
  33 All of this text even though it's smaller should be on the 36px
  34 grid. The grid should reset at the top of the second column.<br>
  35 </div>
  36 <div style="font-size:18px">
  37 All of this text even though it's smaller should be on the 36px
  38 grid. The grid should reset at the top of the second column.<br>
  39 All of this text even though it's smaller should be on the 36px
  40 grid. The grid should reset at the top of the second column.<br>
  41 All of this text even though it's smaller should be on the 36px
  42 grid. The grid should reset at the top of the second column.<br>
  43 </div>
  44 </div>
  45 </div>
  46 </div>
  47 </body>
  48 </html>