| OLD | NEW | 
 | (Empty) | 
|   1 <!DOCTYPE html> |  | 
|   2 <html> |  | 
|   3 <head> |  | 
|   4 <style> |  | 
|   5     #shape-inside { |  | 
|   6         position: relative; |  | 
|   7         font: 50px/1 Ahem, sans-serif; |  | 
|   8         color: green; |  | 
|   9         shape-inside: polygon(0px 0px, 400px 0px, 400px 350px, 0px 350px); |  | 
|  10         shape-padding: 50px; |  | 
|  11     } |  | 
|  12  |  | 
|  13     #shape-outline { |  | 
|  14         position: absolute; |  | 
|  15         top: 0px; |  | 
|  16         left: 0px; |  | 
|  17         width: 500px; |  | 
|  18         height: 500px; |  | 
|  19     } |  | 
|  20 </style> |  | 
|  21 </head> |  | 
|  22 <body> |  | 
|  23     <p>The green rectangles should lie within the inner blue outline.</p> |  | 
|  24     <div id="shape-inside"> |  | 
|  25         <svg id="shape-outline" xmlns="http://www.w3.org/2000/svg"> |  | 
|  26             <polygon points="0,0 400,0 400,350 0,350" stroke="blue" fill="none"/
    > |  | 
|  27             <polygon points="50,50 350,50 350,300 50,300" stroke="blue" fill="no
    ne"/> |  | 
|  28         </svg> |  | 
|  29         XXX<br/><br/>XX<br/><br/>XXX |  | 
|  30     </div> |  | 
|  31 </body> |  | 
|  32 <script> |  | 
|  33 document.body.style.zoom = 1.2 |  | 
|  34 </script> |  | 
|  35 </html> |  | 
|  36  |  | 
| OLD | NEW |