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 |