| OLD | NEW | 
 | (Empty) | 
|   1 <!DOCTYPE html> |  | 
|   2 <html> |  | 
|   3 <head> |  | 
|   4 <style> |  | 
|   5     /* The size of a square that just fits within a circle of radius r is r * sq
    rt(2).  In this |  | 
|   6        case that's the size of one Ahem character: 20 * sqrt(2) == 28.28. |  | 
|   7     */ |  | 
|   8     .shape-inside { |  | 
|   9         width: 40px; |  | 
|  10         height: 40px; |  | 
|  11         font: 28.28px/1 Ahem, sans-serif; |  | 
|  12         color: green; |  | 
|  13         border: 1px solid blue; |  | 
|  14         border-radius: 20px; |  | 
|  15         shape-inside: rectangle(0px, 0px, 40px, 40px, 20px, 20px); |  | 
|  16     } |  | 
|  17 </style> |  | 
|  18 </head> |  | 
|  19 <body> |  | 
|  20     <h1>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=116745">116745</a>:
     [CSS Shapes] rectangle and inset-rectangle do not properly handle rx and ry</h1
    > |  | 
|  21     <h2>Test that if rx > 50% width and ry > 50% height, they are properly clamp
    ed to 50% of the respective dimension when doing layout on the shape. All of the
     following tests should look identical, and the blue circle should wrap around t
    he green square.</h2> |  | 
|  22     <div class="shape-inside fixed-units"> |  | 
|  23         X |  | 
|  24     </div> |  | 
|  25     <div class="shape-inside different-units"> |  | 
|  26         X |  | 
|  27     </div> |  | 
|  28     <div class="shape-inside relative-units"> |  | 
|  29         X |  | 
|  30     </div> |  | 
|  31     <div class="shape-inside edge-case"> |  | 
|  32         X |  | 
|  33     </div> |  | 
|  34 </body> |  | 
|  35 </html> |  | 
| OLD | NEW |