| 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         padding-bottom: 20px; |  | 
|  10     } |  | 
|  11  |  | 
|  12     #region1, #region2, #region3 { |  | 
|  13         border: 1px solid black; |  | 
|  14         overflow-y: hidden; |  | 
|  15     } |  | 
|  16  |  | 
|  17     #region1 { |  | 
|  18         width: 204px; |  | 
|  19         height: 100px; |  | 
|  20     } |  | 
|  21  |  | 
|  22     #region2 { |  | 
|  23         width: 300px; |  | 
|  24         height: 180px; |  | 
|  25     } |  | 
|  26  |  | 
|  27     #region3 { |  | 
|  28         width: 124px; |  | 
|  29         height: 160px; |  | 
|  30     } |  | 
|  31 </style> |  | 
|  32 <p>The first and last lines of text in the regions below should be clipped to th
    e green box. The overflow |  | 
|  33 section sizes itself and clips differently in each region.</p> |  | 
|  34 <div id="container"> |  | 
|  35     <div id="region1"> |  | 
|  36         <div class="overflowContent"> |  | 
|  37             <div class="overflowFirstBox"> |  | 
|  38                 <div class="overflowSecondBox secondBox"> |  | 
|  39                     <div style="width: 500px;">Clipped line of text that should 
    not be visible.</div> |  | 
|  40                     <p>These lines will not spill</p> |  | 
|  41                 </div> |  | 
|  42             </div> |  | 
|  43         </div> |  | 
|  44     </div> |  | 
|  45     <div id="region2"> |  | 
|  46         <div class="overflowContent" style="padding-top: 0px;"> |  | 
|  47             <div class="overflowFirstBox" style="border-top-width: 0px;"> |  | 
|  48                 <div class="overflowSecondBox secondBox" style="margin-top: 0px;
     border-top-width: 0px;"> |  | 
|  49                     <p style="margin-top: 0px;">out of the regions. These lines 
    will not spill out of the regions. These lines will not spill out of the regions
    . These lines will not spill out of the regions. These lines will not</p> |  | 
|  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="margin-top: 0px;
     border-top-width: 0px;"> |  | 
|  58                     <p style="margin-top: 0px;">spill out of the regions.</p> |  | 
|  59                     <div style="width: 500px;">Clipped line of text that should 
    not be visible.</div> |  | 
|  60                 </div> |  | 
|  61             </div> |  | 
|  62         </div> |  | 
|  63     </div> |  | 
|  64 </div> |  | 
| OLD | NEW |