| OLD | NEW | 
|---|
|  | (Empty) | 
| 1 <!DOCTYPE html> |  | 
| 2 <html> |  | 
| 3 <head> |  | 
| 4 <!-- |  | 
| 5 Test test creates a rectilinear polygon with this shape: |  | 
| 6       XXXX |  | 
| 7     XXXX |  | 
| 8   XXXX |  | 
| 9 --> |  | 
| 10 |  | 
| 11 <style id="stylesheet"> |  | 
| 12     #shape-inside, #shape-outline { |  | 
| 13         position: absolute; |  | 
| 14         top: 0; |  | 
| 15         left: 0; |  | 
| 16         width: 400px; |  | 
| 17         height: 200px; |  | 
| 18         margin: 0; |  | 
| 19     } |  | 
| 20 |  | 
| 21     #shape-inside { |  | 
| 22         shape-inside: polygon(200px 0px, 400px 0px, 400px 50px, 300px 50px, 300p
    x 100px, 200px 100px, 200px 150px, 0 150px, 0 100px, 100px 100px, 100px 50px, 20
    0px 50px); |  | 
| 23         word-wrap: break-word; |  | 
| 24         font: 50px/1 Ahem, sans-serif; |  | 
| 25         color: green; |  | 
| 26     } |  | 
| 27 |  | 
| 28     #shape-outline { |  | 
| 29         fill: none; |  | 
| 30         stroke: blue; |  | 
| 31     } |  | 
| 32 |  | 
| 33     #informative-text { |  | 
| 34         position: absolute; |  | 
| 35         top: 150px; |  | 
| 36     } |  | 
| 37 </style> |  | 
| 38 </head> |  | 
| 39 |  | 
| 40 </head> |  | 
| 41 <body> |  | 
| 42   <div id="shape-inside">XXXX XXXX XXXX</div> |  | 
| 43   <svg id="shape-outline" xmlns="http://www.w3.org/2000/svg"> |  | 
| 44       <polygon points="200,0 400,0 400,50 300,50 300,100 200,100 200,150 0,150 0
    ,100 100,100 100,50 200,50"/> |  | 
| 45   </svg> |  | 
| 46   <p id="informative-text"> |  | 
| 47       This test requires the Ahem font. It creates a rectilinear polygonal shape
    -inside and a |  | 
| 48       matching stroked SVG polygon. The content should just fill the shape with 
    solid green.</p> |  | 
| 49 </html> |  | 
| 50 |  | 
| OLD | NEW | 
|---|