| OLD | NEW | 
 | (Empty) | 
|   1 <!DOCTYPE HTML> |  | 
|   2 <html> |  | 
|   3 <head> |  | 
|   4     <script> |  | 
|   5         if (window.internals) |  | 
|   6             window.internals.settings.setCSSShapesEnabled(true); |  | 
|   7     </script> |  | 
|   8     <style> |  | 
|   9         #rectangle { |  | 
|  10             font: 20px Ahem, sans-serif; |  | 
|  11             line-height: 20px; |  | 
|  12             -webkit-font-smoothing: none; |  | 
|  13             -webkit-flow-into: flow; |  | 
|  14         } |  | 
|  15         .region { |  | 
|  16             -webkit-flow-from: flow; |  | 
|  17             width: 200px; |  | 
|  18             height: 200px; |  | 
|  19             border: 2px solid green; |  | 
|  20             padding: 10px; |  | 
|  21         } |  | 
|  22         #region1 { shape-inside: rectangle(50px, 100px, 100px, 100px); } |  | 
|  23         #region2 { |  | 
|  24             margin-top: 10px; |  | 
|  25             shape-inside: rectangle(25px, 100px, 150px, 100px); |  | 
|  26         } |  | 
|  27         #border1 { |  | 
|  28             position: absolute; |  | 
|  29             top: 118px; |  | 
|  30             left: 68px; |  | 
|  31             width: 100px; |  | 
|  32             height: 100px; |  | 
|  33             border: 2px solid blue; |  | 
|  34         } |  | 
|  35         #border2 { |  | 
|  36             position: absolute; |  | 
|  37             top: 352px; |  | 
|  38             left: 43px; |  | 
|  39             width: 140px; |  | 
|  40             height: 100px; |  | 
|  41             border: 2px solid blue; |  | 
|  42         } |  | 
|  43     </style> |  | 
|  44 </head> |  | 
|  45 <body> |  | 
|  46     <div id="rectangle"> |  | 
|  47        X X <p>X X X X X<p> X</p></p> X X X X<p> X X X X X X X X X X X |  | 
|  48     </div> |  | 
|  49  |  | 
|  50     <div id="page"> |  | 
|  51         <div id="border1"></div> |  | 
|  52         <div id="region1" class="region"></div> |  | 
|  53         <div id="border2"></div> |  | 
|  54         <div id="region2" class="region"></div> |  | 
|  55     </div> |  | 
|  56     <p style="margin-top: 50px;">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 block co
    ntent should flow inside the blue ractangles, the overflow should be pushed down
     below the last region's content box, which means the overflow should start just
     below the last regions's shape, 10px above the green border box.</p> |  | 
|  57     <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> |  | 
|  58 </body> |  | 
|  59 </html> |  | 
| OLD | NEW |