| OLD | NEW | 
 | (Empty) | 
|   1 <!DOCTYPE html> |  | 
|   2 <html> |  | 
|   3 <head> |  | 
|   4 <style> |  | 
|   5     #content { |  | 
|   6         font: 13px Ahem, sans-serif; |  | 
|   7         line-height: 15px; |  | 
|   8     } |  | 
|   9     .region1 { |  | 
|  10         width: 200px; |  | 
|  11         height: 200px; |  | 
|  12         border: 5px solid black; |  | 
|  13         border-top: 10px solid green; |  | 
|  14         border-bottom: 15px solid yellow; |  | 
|  15         margin-top: 10px; |  | 
|  16     } |  | 
|  17     .region2 { |  | 
|  18         width: 400px; |  | 
|  19         height: 400px; |  | 
|  20         border: 15px solid black; |  | 
|  21         border-top: 30px solid green; |  | 
|  22         border-left: 0px; /* FIXME: Content gets extra left offset when there is
     left-border on the content box:  http://webkit.org/b/117573 */ |  | 
|  23         margin-top: 10px; |  | 
|  24         shape-inside: polygon(30px 30px, 380px 380px, 10px 380px); |  | 
|  25     } |  | 
|  26 </style> |  | 
|  27 </head> |  | 
|  28 <body> |  | 
|  29 <div id="content"> |  | 
|  30     <div class="region1"> |  | 
|  31         The Culture and <p>the Idiran <p>Empire</p> are </p>at war in a galaxy-s
    panning conflict. Horza, a mercenary |  | 
|  32     </div> |  | 
|  33     <div class="region2"> |  | 
|  34         <p>capable of altering his appearance</p>at will <p>(a Changer),</p> is 
    assigned the task of retrieving a dispossessed Culture Mind by his Idiran handle
    rs. |  | 
|  35     </div> |  | 
|  36 </div> |  | 
|  37  |  | 
|  38 <p style="margin-top: 30px;">Requires Ahem font. There are two regions, there is
     a polygon shape-inside on the second region. The shape is positioned and it for
    ces the content to be adjusted (pushed down from the top of the shape) inside th
    e shape. The content should fill out the first region and it should fill out the
     polygon shape on the second region.</p> |  | 
|  39 <p>Bug <a href="http://webkit.org/b/117599">117599</a>[CSS Shapes][CSS Regions] 
    Respect bottom positioned shapes and content adjustment inside shapes</p> |  | 
|  40  |  | 
|  41 </body> |  | 
|  42 </html> |  | 
| OLD | NEW |