OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script> | |
5 if (window.internals) | |
6 window.internals.settings.setCSSExclusionsEnabled(true); | |
7 </script> | |
8 <style> | 4 <style> |
9 /* The Ahem font's size is equal to a little less than the size of the large
st square that will | 5 /* The Ahem font's size is equal to a little less than the size of the large
st square that will |
10 fit within the ellipse. Solving the ellipse equation when x = y, produce
s the size of the | 6 fit within the ellipse. Solving the ellipse equation when x = y, produce
s the size of the |
11 square: 2 * rx * ry / sqrt(rx^2 + ry^2). For rx=200 and ry=100, that's 1
78.885. To eliminate | 7 square: 2 * rx * ry / sqrt(rx^2 + ry^2). For rx=200 and ry=100, that's 1
78.885. To eliminate |
12 the impact of subpixel layout on the square's size (but not it's origin),
we've reduced its | 8 the impact of subpixel layout on the square's size (but not it's origin),
we've reduced its |
13 size to 178. | 9 size to 178. |
14 */ | 10 */ |
15 #shape-inside { | 11 #shape-inside { |
16 position: relative; | 12 position: relative; |
17 width: 500px; | 13 width: 500px; |
(...skipping 14 matching lines...) Expand all Loading... |
32 </head> | 28 </head> |
33 <body> | 29 <body> |
34 <div id="shape-inside"> | 30 <div id="shape-inside"> |
35 <svg id="shape-outline" xmlns="http://www.w3.org/2000/svg"> | 31 <svg id="shape-outline" xmlns="http://www.w3.org/2000/svg"> |
36 <ellipse cx="220" cy="220" rx="200" ry="100" stroke="blue" fill="no
ne"/> | 32 <ellipse cx="220" cy="220" rx="200" ry="100" stroke="blue" fill="no
ne"/> |
37 </svg> | 33 </svg> |
38 X | 34 X |
39 </div> | 35 </div> |
40 </body> | 36 </body> |
41 </html> | 37 </html> |
OLD | NEW |