OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <link rel="stylesheet" href="resources/region-style.css"> | |
3 <style> | |
4 #region1, #region2, #region3 { | |
5 border: 1px solid black; | |
6 -webkit-flow-from: flow1; | |
7 } | |
8 | |
9 #region1 { | |
10 width: 400px; | |
11 height: 150px; | |
12 } | |
13 | |
14 #region2 { | |
15 width: 400px; | |
16 height: 150px; | |
17 } | |
18 | |
19 #region3 { | |
20 width: 400px; | |
21 height: 150px; | |
22 } | |
23 </style> | |
24 <p>The first and last lines of text in the regions below should be clipped to th
e green box. The overflow | |
25 section sizes itself and clips differently in each region. The green box should
be even with the lime floats at the top of the first region.</p> | |
26 | |
27 <div class="overflowContentFlow"> | |
28 <div class="overflowFirstBox" style="padding: 5px;"> | |
29 <div class="overflowBox floatLeft" id="float1"></div><div class="overflo
wBox floatRight" id="float2"></div> | |
30 <div class="overflowSecondBox"> | |
31 <p>These lines will not spill out of the regions. These lines will n
ot spill out of the regions. | |
32 These lines will not spill out of the regions. These lines will not
spill out of the regions. </p> | |
33 <p>These lines will not spill out of the regions. These lines will n
ot spill out of the regions. | |
34 These lines will not spill out of the regions. These lines will not
spill out of the regions. </p> | |
35 </div> | |
36 </div> | |
37 </div> | |
38 | |
39 <div id="container"> | |
40 <div id="region1"></div> | |
41 <div id="region2"></div> | |
42 <div id="region3"></div> | |
43 </div> | |
44 | |
45 <script> | |
46 document.body.offsetLeft; | |
47 document.getElementById('float1').style.width = '50px'; | |
48 document.getElementById('float2').style.width = '50px'; | |
49 </script> | |
OLD | NEW |