| OLD | NEW |
| (Empty) |
| 1 <!doctype html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | |
| 5 .flowContent { font-size: 50px; font-family: Ahem; } | |
| 6 #article { -webkit-flow-into: flow; } | |
| 7 | |
| 8 #p1 { | |
| 9 color: green; | |
| 10 } | |
| 11 | |
| 12 #p2 { | |
| 13 color: blue; | |
| 14 -webkit-region-break-before: always; | |
| 15 } | |
| 16 | |
| 17 .region { | |
| 18 width: 250px; | |
| 19 -webkit-flow-from: flow; | |
| 20 margin-top: 10px; | |
| 21 } | |
| 22 | |
| 23 #line1 { | |
| 24 display: none; | |
| 25 } | |
| 26 </style> | |
| 27 </head> | |
| 28 <script> | |
| 29 function forceLayout() | |
| 30 { | |
| 31 document.body.offsetTop; // force a layout; | |
| 32 document.getElementById('line1').style.display = "block"; | |
| 33 } | |
| 34 </script> | |
| 35 </head> | |
| 36 <body onload="forceLayout();"> | |
| 37 <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=102954">bug
102954</a>.</p> | |
| 38 <p>Adding #line1 only after the first layout is done. That will force a
second layout | |
| 39 and the first region needs to resize to accommodate the size of both
lines.</p> | |
| 40 <p>You should see two boxes. The first box should have twice the height
of the second one. | |
| 41 The first box should be all green and the second box should be all bl
ue.</p> | |
| 42 <div id="article" class="flowContent"> | |
| 43 <div id="p1"> | |
| 44 <div id="line1">aaaaa</div> | |
| 45 <div id="line2">aaaaa</div> | |
| 46 </div> | |
| 47 <div id="p2">aaaaa</div> | |
| 48 </div> | |
| 49 | |
| 50 <div class="region"></div> | |
| 51 <div class="region"></div> | |
| 52 </body> | |
| 53 </html> | |
| OLD | NEW |