8d5faafa02de76687fbd3665a5ec85f9083464b6
[WebKit-https.git] / LayoutTests / fast / line-grid / line-grid-into-columns.html
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html>
3 <head>
4 <style>
5 .grid { -webkit-line-grid: simple; -webkit-line-grid-snap: baseline; 
6         font-size:36px; position:relative; width:800px}</style>
7 </head>
8 <body style="margin:0">
9
10 <div class="grid">
11 <div style="position:absolute;left:0;right:0;top:0;bottom:0; font-family:'Ahem'; z-index:-1; color:lime; font-size:32px; white-space:nowrap; overflow:hidden">
12 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
13 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
14 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
15 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
16 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
17 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
18 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
19 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
20 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
21 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
22 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
23 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
24 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
25 </div>
26 <div style="height:500px; -webkit-column-count:2;padding:20px">
27 <div style="font-size:16px">
28 All of this text even though it's smaller should be on the 36px
29 grid. The grid should reset at the top of the second column.<br>
30 All of this text even though it's smaller should be on the 36px
31 grid. The grid should reset at the top of the second column.<br>
32 All of this text even though it's smaller should be on the 36px
33 grid. The grid should reset at the top of the second column.<br>
34 </div>
35 <div style="font-size:24px">
36 All of this text even though it's smaller should be on the 36px
37 grid. The grid should reset at the top of the second column.<br>
38 All of this text even though it's smaller should be on the 36px
39 grid. The grid should reset at the top of the second column.<br>
40 All of this text even though it's smaller should be on the 36px
41 grid. The grid should reset at the top of the second column.<br>
42 </div>
43 <div style="font-size:10px">
44 All of this text even though it's smaller should be on the 36px
45 grid.
46 </div>
47 </div>
48 </div>
49 </body>
50 </html>