| OLD | NEW | 
 | (Empty) | 
|   1 <!DOCTYPE html> |  | 
|   2 <html style="direction:rtl"> |  | 
|   3     <head> |  | 
|   4         <style> |  | 
|   5             body { |  | 
|   6                 font: 16px/1.25 monospace; |  | 
|   7             } |  | 
|   8  |  | 
|   9             .first-box { |  | 
|  10                 border: 1px solid blue; |  | 
|  11             } |  | 
|  12  |  | 
|  13             .second-box { |  | 
|  14                 margin: auto; |  | 
|  15                 border: 1px solid green; |  | 
|  16                 overflow: hidden; |  | 
|  17                 width: 75%; |  | 
|  18                 position: relative; |  | 
|  19                 z-index: 0; |  | 
|  20                 padding-bottom: 20px; |  | 
|  21             } |  | 
|  22  |  | 
|  23             #region1, #region2, #region3 { |  | 
|  24                 border: 1px solid black; |  | 
|  25             } |  | 
|  26  |  | 
|  27             #region1 { |  | 
|  28                 width: 204px; |  | 
|  29                 height: 100px; |  | 
|  30             } |  | 
|  31  |  | 
|  32             #region2 { |  | 
|  33                 width: 300px; |  | 
|  34                 height: 180px; |  | 
|  35             } |  | 
|  36  |  | 
|  37             #region3 { |  | 
|  38                 width: 116px; |  | 
|  39                 height: 120px; |  | 
|  40             } |  | 
|  41         </style> |  | 
|  42     </head> |  | 
|  43     <body> |  | 
|  44         <p style="direction:ltr">The first and last lines of text in the regions
     below should be clipped to the green box. The overflow section sizes itself and
     clips differently in each region.</p> |  | 
|  45  |  | 
|  46         <div id="container"> |  | 
|  47             <div id="region1" style="overflow: hidden;"> |  | 
|  48                 <div class="first-box" style="margin-top: 5px; margin-left: 5px;
     margin-right: 5px;"> |  | 
|  49                     <div class="second-box"> |  | 
|  50                         <div style="width: 500px; opacity: 0.8;">Clipped line of
     text that should not be visible.</div> |  | 
|  51                         <p>These lines will not spill</p> |  | 
|  52                     </div> |  | 
|  53                 </div> |  | 
|  54             </div> |  | 
|  55             <div id="region2" style="overflow: hidden;"> |  | 
|  56                 <div class="first-box" style="border-top: none; margin-left: 5px
    ; margin-right: 5px;"> |  | 
|  57                     <div class="second-box" style="border-top: none;"> |  | 
|  58                         <p style="margin-top: 0px;"> |  | 
|  59                         out of the regions. These lines will not spill out of th
    e regions. |  | 
|  60                         These lines will not spill out of the regions. These lin
    es will not spill out of the regions. |  | 
|  61                         These lines will not |  | 
|  62                         </p> |  | 
|  63                     </div> |  | 
|  64                 </div> |  | 
|  65             </div> |  | 
|  66  |  | 
|  67             <div id="region3"> |  | 
|  68                 <div class="first-box" style="border-top: none; margin-left: 5px
    ; margin-right: 5px;"> |  | 
|  69                     <div class="second-box" style="border-top: none;"> |  | 
|  70                         <p style="margin-top: 0px;">spill out of the regions.</p
    > |  | 
|  71                         <div style="width: 500px; position: absolute;">Clipped l
    ine of text that should not be visible.</div> |  | 
|  72                     </div> |  | 
|  73                 </div> |  | 
|  74             </div> |  | 
|  75         </div> |  | 
|  76     </body> |  | 
|  77 </html> |  | 
| OLD | NEW |