| 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 |