| OLD | NEW | 
 | (Empty) | 
|   1 <!DOCTYPE HTML> |  | 
|   2 <html> |  | 
|   3 <head> |  | 
|   4     <style> |  | 
|   5         #rectangle { |  | 
|   6             font: 20px Ahem, sans-serif; |  | 
|   7             -webkit-font-smoothing: none; |  | 
|   8             line-height: 20px; |  | 
|   9             -webkit-flow-into: flow; |  | 
|  10         } |  | 
|  11         #region { |  | 
|  12             -webkit-flow-from: flow; |  | 
|  13             width: 200px; |  | 
|  14             height: 200px; |  | 
|  15             shape-inside: rectangle(50px, 50px, 100px, 100px); |  | 
|  16             border: 2px solid green; |  | 
|  17         } |  | 
|  18         #border { |  | 
|  19             position: absolute; |  | 
|  20             top: 58px; |  | 
|  21             left: 58px; |  | 
|  22             width: 100px; |  | 
|  23             height: 100px; |  | 
|  24             border: 2px solid blue; |  | 
|  25         } |  | 
|  26     </style> |  | 
|  27 </head> |  | 
|  28 <body> |  | 
|  29     <div id="rectangle"> |  | 
|  30        X X X X X X X X X X X X X X X X X X X X X X X |  | 
|  31     </div> |  | 
|  32  |  | 
|  33     <div id="page"> |  | 
|  34         <div id="border"></div> |  | 
|  35         <div id="region"></div> |  | 
|  36     </div> |  | 
|  37     <p style="margin-top: 100px;">Requires Ahem font. The shape-inside on the re
    gion is illustrated by the blue rectangle. The content should wrap inside the th
    e blue rectangle, the overflow should start on the left under the content box.</
    p> |  | 
|  38     <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> |  | 
|  39 </body> |  | 
|  40 </html> |  | 
| OLD | NEW |