| OLD | NEW | 
 | (Empty) | 
|   1 <!DOCTYPE html> |  | 
|   2 <html> |  | 
|   3 <head> |  | 
|   4 <style> |  | 
|   5     .shape-inside { |  | 
|   6         position: relative; |  | 
|   7         width: 150px; |  | 
|   8         height: 100px; |  | 
|   9     } |  | 
|  10  |  | 
|  11     .shape-outline { |  | 
|  12         position: absolute; |  | 
|  13         top: 0px; |  | 
|  14         left: 0px; |  | 
|  15         width: 150px; |  | 
|  16         height: 100px; |  | 
|  17     } |  | 
|  18  |  | 
|  19     .shape-content { |  | 
|  20         position: absolute; |  | 
|  21         top: 0px; |  | 
|  22         left: 0px; |  | 
|  23         font: 50px/1 Ahem, sans-serif; |  | 
|  24         color: green; |  | 
|  25     } |  | 
|  26 </style> |  | 
|  27 </head> |  | 
|  28 <body> |  | 
|  29     <p>The green rectangles should appear within the blue outline.</p> |  | 
|  30     <div class="shape-inside"> |  | 
|  31         <div class="shape-content">XXX<br/>X</div> |  | 
|  32         <svg class="shape-outline" xmlns="http://www.w3.org/2000/svg"> |  | 
|  33             <polygon stroke="blue" fill="none" points="0,0 150,0 150,100 100,100
     100,50 50,50 50,100 0,100"/> |  | 
|  34         </svg> |  | 
|  35     </div> |  | 
|  36     <p>This is the same test as the one above, except that the shape-inside's co
    ntent has trailing whitespace.</p> |  | 
|  37     <div class="shape-inside"> |  | 
|  38         <div class="shape-content">XXX<br/>X</div> |  | 
|  39         <svg class="shape-outline" xmlns="http://www.w3.org/2000/svg"> |  | 
|  40             <polygon stroke="blue" fill="none" points="0,0 150,0 150,100 100,100
     100,50 50,50 50,100 0,100"/> |  | 
|  41         </svg> |  | 
|  42     </div> |  | 
|  43 </body> |  | 
|  44 </html> |  | 
| OLD | NEW |