OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script> | 4 <script> |
5 function test() { | 5 function test() { |
6 document.body.offsetTop; // trigger layout | 6 document.body.offsetTop; // trigger layout |
7 document.getElementById('elm').style.display = 'block'; | 7 document.getElementById('elm').style.display = 'block'; |
8 } | 8 } |
9 </script> | 9 </script> |
10 </head> | 10 </head> |
11 <body onload="test()"> | 11 <body onload="test()"> |
12 <h3>Changing the contents of a table cell, increasing column height</h3> | 12 <h3>Changing the contents of a table cell, increasing column height</h3> |
13 | 13 |
14 <p>You should see the text "first column" once in the first column, and
the text "second | 14 <p>You should see the text "first column" once in the first column, and
the text "second |
15 column" twice in the second column.</p> | 15 column" twice in the second column.</p> |
16 <div style="-webkit-columns:2; columns:2; x-webkit-column-rule:1px solid
; xcolumn-rule:1px solid; orphans:1; widows:1; xbackground:yellow;"> <!-- FIXME:
should ideally paint background and column rules here, to measure the column he
ight, but the balancing machinery in the old multicol implementation doesn't do
it properly. See crbug.com/352052 --> | 16 <div style="-webkit-columns:2; columns:2; orphans:1; widows:1;"> |
17 <div style="display:table-row;"> | 17 <div style="display:table-row;"> |
18 first column | 18 first column |
19 <div style="height:0.1em;"></div> | 19 <div style="height:0.1em;"></div> |
20 </div> | 20 </div> |
21 <div style="display:table-row;"> | 21 <div style="display:table-row;"> |
22 second column | 22 second column |
23 <div id="elm" style="display:none;">second column</div> | 23 <div id="elm" style="display:none;">second column</div> |
24 </div> | 24 </div> |
25 </div> | 25 </div> |
26 </body> | 26 </body> |
27 </html> | 27 </html> |
OLD | NEW |