| OLD | NEW | 
 | (Empty) | 
|   1 <!DOCTYPE HTML> |  | 
|   2 <html> |  | 
|   3 <head> |  | 
|   4     <style> |  | 
|   5         #page { |  | 
|   6             font: 20px Ahem, sans-serif; |  | 
|   7             line-height: 20px; |  | 
|   8             -webkit-font-smoothing: none; |  | 
|   9         } |  | 
|  10         .region { |  | 
|  11             width: 200px; |  | 
|  12             height: 200px; |  | 
|  13             border: 2px solid green; |  | 
|  14             padding: 10px; |  | 
|  15         } |  | 
|  16         #region2 { margin-top: 10px; } |  | 
|  17         #border1 { |  | 
|  18             position: absolute; |  | 
|  19             top: 118px; |  | 
|  20             left: 68px; |  | 
|  21             width: 100px; |  | 
|  22             height: 100px; |  | 
|  23             border: 2px solid blue; |  | 
|  24         } |  | 
|  25         #border2 { |  | 
|  26             position: absolute; |  | 
|  27             top: 352px; |  | 
|  28             left: 43px; |  | 
|  29             width: 140px; |  | 
|  30             height: 100px; |  | 
|  31             border: 2px solid blue; |  | 
|  32         } |  | 
|  33         #overflow { |  | 
|  34             position: relative; z-index: 1; |  | 
|  35             width: 200px; |  | 
|  36             margin-left: 12px; |  | 
|  37             margin-top: -12px; |  | 
|  38         } |  | 
|  39     </style> |  | 
|  40 </head> |  | 
|  41 <body> |  | 
|  42     <div id="page"> |  | 
|  43         <div id="region1" class="region"></div> |  | 
|  44         <div id="border1">X X X X X X X X X X X X X X X</div> |  | 
|  45         <div id="region2" class="region"></div> |  | 
|  46         <div id="border2">X X X X X X X X X X X X X X X X X X X X</div> |  | 
|  47         <div id="overflow">X X X X X X X</div> |  | 
|  48     </div> |  | 
|  49     <p style="margin-top: 22px;">Requires Ahem font. There are two regions (10px
     padding is applied to the regions) with two ractangle shape-insides, the shape-
    insides are smaller and have top and left offsets inside the content box. The re
    ctangular shapes boundaries are represented by the blue rectangles. The inline c
    ontent should flow inside the blue ractangles, the overflow should be pushed dow
    n below the last region's content box, which means the overflow should start jus
    t below the last regions's shape, 10px above the green border box.</p> |  | 
|  50     <p>Bug <a href="http://webkit.org/b/117599">117599</a>[CSS Shapes][CSS Regio
    ns] Respect bottom positioned shapes and content adjustment inside shapes</p> |  | 
|  51 </body> |  | 
|  52 </html> |  | 
| OLD | NEW |