[css shapes] layout for new ellipse syntax
[WebKit-https.git] / LayoutTests / fast / shapes / shape-inside / shape-inside-ellipse.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5     /* The Ahem font's size is equal to a little less than the size of the largest square that will 
6        fit within the ellipse.  Solving the ellipse equation when x = y, produces the size of the 
7        square: 2 * rx * ry / sqrt(rx^2 + ry^2).  For rx=200 and ry=100, that's 178.885.  To eliminate
8        the impact of subpixel layout on the square's size (but not it's origin), we've reduced its
9        size to 178.
10     */
11     #shape-inside {
12         position: relative;
13         width: 500px;
14         height: 500px;
15         -webkit-shape-inside: ellipse(200px 100px at 220px 220px);
16         font: 178px/1 Ahem, sans-serif;
17         color: green;
18     }
19
20     #shape-outline {
21         position: absolute;
22         top: 0px;
23         left: 0px;
24         width: 500px;
25         height: 500px;
26     }
27 </style>
28 </head>
29 <body>
30     <div id="shape-inside">
31         <svg id="shape-outline" xmlns="http://www.w3.org/2000/svg">
32             <ellipse cx="220" cy="220" rx="200" ry="100"  stroke="blue" fill="none"/>
33         </svg>
34         X
35     </div>
36 </body>
37 </html>