| OLD | NEW | 
|---|
|  | (Empty) | 
| 1 <!DOCTYPE html> |  | 
| 2 <html> |  | 
| 3 <head> |  | 
| 4 <style> |  | 
| 5 article { font: 20px/1 Ahem, sans-serif; } |  | 
| 6 .regions { |  | 
| 7     width: 260px; |  | 
| 8     height: 200px; |  | 
| 9     margin: 0px 20px 20px; |  | 
| 10     background-color: #b0dcff; |  | 
| 11     shape-inside: rectangle(10px, -20px, 100%, 50%); |  | 
| 12 } |  | 
| 13 .overflow { |  | 
| 14     margin-top: -20px; |  | 
| 15     margin-left: 20px; |  | 
| 16 } |  | 
| 17 </style> |  | 
| 18 </head> |  | 
| 19 <body> |  | 
| 20 <article> |  | 
| 21     <div class="regions"> |  | 
| 22         X X X X X X X X X X X X X X X X X X X X X X X X |  | 
| 23     </div> |  | 
| 24     <div class="regions"> |  | 
| 25         X X X X X X X X X X X X X X X X X X X X X X X X |  | 
| 26     </div> |  | 
| 27     <div class="overflow"> |  | 
| 28        X X X X X |  | 
| 29     </div> |  | 
| 30 </article> |  | 
| 31 <p style="margin-top: 20px"> |  | 
| 32 Requires Ahem font. We have two regions, a rectangle shape with negative top coo
    rdinate and 10px left offset is applied on the regions. |  | 
| 33 The content should flow from the first shape to the second shape. The overflow s
    hould be pushed down below the content box. |  | 
| 34 </p> |  | 
| 35 <p>Bug <a href="http://webkit.org/b/123103">123103</a>: [CSS Shapes][CSS Regions
    ] Don't apply shape-inside when we have multiple auto-height regions and the hei
    ght is not resolved</p> |  | 
| 36 </body> |  | 
| 37 </html> |  | 
| OLD | NEW | 
|---|