| OLD | NEW | 
 | (Empty) | 
|   1 <!DOCTYPE HTML> |  | 
|   2 <html> |  | 
|   3 <head> |  | 
|   4     <style> |  | 
|   5         #page { |  | 
|   6             font: 20px Ahem, sans-serif; |  | 
|   7             -webkit-font-smoothing: none; |  | 
|   8             line-height: 20px; |  | 
|   9         } |  | 
|  10         .region { |  | 
|  11             width: 200px; |  | 
|  12             height: 200px; |  | 
|  13             border: 2px solid green; |  | 
|  14         } |  | 
|  15         #region2 { margin-top: 10px; } |  | 
|  16         #border1 { |  | 
|  17             position: absolute; |  | 
|  18             top: 58px; |  | 
|  19             left: 58px; |  | 
|  20             width: 100px; |  | 
|  21             height: 100px; |  | 
|  22             border: 2px solid blue; |  | 
|  23         } |  | 
|  24         #border2 { |  | 
|  25             position: absolute; |  | 
|  26             top: 272px; |  | 
|  27             left: 33px; |  | 
|  28             width: 140px; |  | 
|  29             height: 100px; |  | 
|  30             border: 2px solid blue; |  | 
|  31         } |  | 
|  32         #overflow { |  | 
|  33             width: 200px; |  | 
|  34             margin-left: 2px; |  | 
|  35             margin-top: -2px; |  | 
|  36         } |  | 
|  37     </style> |  | 
|  38 </head> |  | 
|  39 <body> |  | 
|  40     <div id="page"> |  | 
|  41         <div id="border1">X X X X X X X X X X X X X X X</div> |  | 
|  42         <div id="region1" class="region"></div> |  | 
|  43         <div id="border2">X X X X X X X X X X X X X X X X X X X X</div> |  | 
|  44         <div id="region2" class="region"></div> |  | 
|  45         <div id="overflow">X X X X X X X</div> |  | 
|  46     </div> |  | 
|  47     <p style="margin-top: 12px;">Requires Ahem font. There are two regions with 
    two ractangle shape-insides, the shape-insides are smaller and have top and left
     offsets inside the content box. The rectangular shapes boundaries are represent
    ed by the blue rectangles. The inline content should flow inside the blue ractan
    gles, the overflow should be pushed down below the last region's content box</p> |  | 
|  48     <p>Bug <a href="http://webkit.org/b/116252">116252</a> [CSS Regions][CSS Exc
    lusions] shape-inside on regions should respect positioned shapes and overflow</
    p> |  | 
|  49 </body> |  | 
|  50 </html> |  | 
| OLD | NEW |