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