| OLD | NEW | 
 | (Empty) | 
|   1 <!DOCTYPE html> |  | 
|   2 <link rel="stylesheet" href="resources/region-style.css"> |  | 
|   3 <style> |  | 
|   4         body { -webkit-font-smoothing: none; font: 16px/1.25 monospace; } |  | 
|   5  |  | 
|   6     .secondBox { |  | 
|   7         margin: auto; |  | 
|   8         width: 75%; |  | 
|   9     } |  | 
|  10  |  | 
|  11     #region1, #region2, #region3 { |  | 
|  12         border: 1px solid black; |  | 
|  13         overflow: hidden; |  | 
|  14     } |  | 
|  15  |  | 
|  16     #region1 { |  | 
|  17         width: 300px; |  | 
|  18         height: 100px; |  | 
|  19     } |  | 
|  20  |  | 
|  21     #region2 { |  | 
|  22         width: 404px; |  | 
|  23         height: 200px; |  | 
|  24     } |  | 
|  25  |  | 
|  26     #region3 { |  | 
|  27         width: 220px; |  | 
|  28         height: 120px; |  | 
|  29     } |  | 
|  30 </style> |  | 
|  31 <p>The first and last lines of text in the regions below should be clipped to th
    e green box. The overflow |  | 
|  32 section sizes itself and clips differently in each region. The green box should 
    start below the lime floats.</p> |  | 
|  33 <div id="container"> |  | 
|  34     <div id="region1"> |  | 
|  35         <div class="overflowContent"> |  | 
|  36             <div class="overflowFirstBox"> |  | 
|  37                 <div class="overflowBox2 floatLeft"></div> <div class="overflowB
    ox2 floatRight"></div> |  | 
|  38                 <div class="overflowSecondBox secondBox"> |  | 
|  39                     <div style="width: 500px; padding-bottom: 25px">Clipped line
     of text that should not be visible.</div> |  | 
|  40                 </div> |  | 
|  41             </div> |  | 
|  42         </div> |  | 
|  43     </div> |  | 
|  44     <div id="region2"> |  | 
|  45         <div class="overflowContent" style="padding-top: 0px; padding-bottom: 0p
    x"> |  | 
|  46             <div class="overflowFirstBox" style="border-top-width: 0px; border-b
    ottom-width: 0px"> |  | 
|  47                 <div class="overflowSecondBox secondBox" style="border-top-width
    : 0px; border-botttom-width: 0px; overflow-y: hidden"> |  | 
|  48                     <p style="margin-top: 0px">These lines will not spill out of
     the regions. These lines will not spill out of the regions. These lines will no
    t spill out of the regions. These lines will not spill out of the regions. These
     lines will not spill out of the regions.</p> |  | 
|  49                     <br/> |  | 
|  50                 </div> |  | 
|  51             </div> |  | 
|  52         </div> |  | 
|  53     </div> |  | 
|  54     <div id="region3"> |  | 
|  55         <div class="overflowContent" style="padding-top: 0px"> |  | 
|  56             <div class="overflowFirstBox" style="border-top-width: 0px"> |  | 
|  57                 <div class="overflowSecondBox secondBox" style="border-top-width
    : 0px"> |  | 
|  58                     <div style="width:500px">Clipped line of text that should no
    t be visible.</div> |  | 
|  59                 </div> |  | 
|  60             </div> |  | 
|  61         </div> |  | 
|  62     </div> |  | 
|  63 </div> |  | 
| OLD | NEW |