OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 body { font: 16px/1.25 monospace; } | |
6 | |
7 #content { | |
8 -webkit-flow-into: flow1; | |
9 padding: 5px; | |
10 } | |
11 | |
12 #first-box { | |
13 border: 1px solid blue; | |
14 height:200px; | |
15 } | |
16 | |
17 #second-box { | |
18 margin:auto; | |
19 border: 1px solid green; | |
20 width:75%; | |
21 } | |
22 | |
23 #region1, #region2 { | |
24 border: 1px solid black; | |
25 -webkit-flow-from: flow1; | |
26 } | |
27 | |
28 #region1 { | |
29 width: 412px; | |
30 height: 210px; | |
31 } | |
32 | |
33 #region2 { | |
34 width: 300px; | |
35 height: 150px; | |
36 } | |
37 #p1, #p2, #p3 { | |
38 margin: 0; | |
39 } | |
40 </style> | |
41 </head> | |
42 <body> | |
43 <p>In the test case below, the green block's width should not vary and s
hould use the first region to determine its width. It is overflowing downwards o
ut of the blue block, and so the portion that overflows should continue to use t
he blue block's containing block width. The blue block does not exist in region
two, so using some hypothetical made-up width is incorrect. The overflow should
be spilling out of the top of region one and be painted in region two.</p> | |
44 <div id="content"> | |
45 <div id="first-box"> | |
46 <div id="second-box"> | |
47 <p id="p1">These lines should all fit to the width of the bl
ock in the first region and spill out of the bottom of the first region.</p> | |
48 <p id="p2">These lines should all fit to the width of the bl
ock in the first region and spill out of the bottom of the first region.</p> | |
49 <p id="p3">These lines should all fit to the width of the bl
ock in the first region and spill out of the bottom of the first region.</p> | |
50 </div> | |
51 </div> | |
52 </div> | |
53 | |
54 <div id="container"> | |
55 <div id="region1"></div> | |
56 <div id="region2"></div> | |
57 </div> | |
58 </body> | |
59 </html> | |
OLD | NEW |