OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>shape-outside-floats-ellipse-000-reference.html</title> | |
3 <link rel="author" title="Adobe" href="http://html.adobe.com/"> | |
4 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"> | |
5 <meta name="flags" content="ahem dom"> | |
6 <style> | 2 <style> |
7 .container { | 3 .container { |
8 position: relative; | 4 position: relative; |
9 font: 20px/1 Ahem, sans-serif; | 5 font: 20px/1 Ahem, sans-serif; |
10 width: 500px; | 6 width: 500px; |
11 height: 200px; | 7 height: 200px; |
12 border: 1px solid black; | 8 border: 1px solid black; |
13 } | 9 } |
14 | 10 |
15 .ellipse { | 11 .ellipse { |
16 z-index: -1; | 12 z-index: -1; |
17 width: 320px; | 13 width: 320px; |
18 height: 160px; | 14 height: 160px; |
19 border-radius: 160px / 80px; | 15 border-radius: 160px / 80px; |
20 background-color: blue; | 16 background-color: blue; |
21 overflow: hidden; | 17 overflow: hidden; |
22 } | 18 } |
(...skipping 15 matching lines...) Expand all Loading... |
38 clear: left; | 34 clear: left; |
39 height: 20px; | 35 height: 20px; |
40 } | 36 } |
41 | 37 |
42 .right-ellipse-float-line { | 38 .right-ellipse-float-line { |
43 float: right; | 39 float: right; |
44 clear: right; | 40 clear: right; |
45 height: 20px; | 41 height: 20px; |
46 } | 42 } |
47 </style> | 43 </style> |
48 | |
49 <body> | 44 <body> |
50 <p>The black squares should trace the right side of the ellipse's blue outline.<
/p> | 45 <p>The black squares should trace the right side of the ellipse's blue outline.<
/p> |
51 <div class="container"> | 46 <div class="container"> |
52 X<br/> | 47 X<br/> |
53 <div id="left-ellipse-outline" class="ellipse"></div> | 48 <div id="left-ellipse-outline" class="ellipse"></div> |
54 <!-- generated left-rounded-rect-float-line divs will be inserted here --> | 49 <!-- generated left-rounded-rect-float-line divs will be inserted here --> |
55 X<br/> | 50 X<br/> |
56 X<br/> | 51 X<br/> |
57 X<br/> | 52 X<br/> |
58 X<br/> | 53 X<br/> |
59 X<br/> | 54 X<br/> |
60 X<br/> | 55 X<br/> |
61 X<br/> | 56 X<br/> |
62 X<br/> | 57 X<br/> |
63 X | 58 X |
64 </div> | 59 </div> |
65 | 60 |
66 <p>The black squares should trace the left side of the ellipse's blue outline.</
p> | 61 <p>The black squares should trace the left side of the ellipse's blue outline.</
p> |
67 <div class="container" style="text-align: right"> | 62 <div class="container" style="text-align: right"> |
68 X<br/> | 63 X<br/> |
69 <div id="right-ellipse-outline" class="ellipse"></div> | 64 <div id="right-ellipse-outline" class="ellipse"></div> |
70 <!-- generated right-rounded-rect-float-line divs will be inserted here --
> | 65 <!-- generated right-rounded-rect-float-line divs will be inserted here --
> |
71 X<br/> | 66 X<br/> |
72 X<br/> | 67 X<br/> |
73 X<br/> | 68 X<br/> |
74 X<br/> | 69 X<br/> |
75 X<br/> | 70 X<br/> |
76 X<br/> | 71 X<br/> |
77 X<br/> | 72 X<br/> |
78 X<br/> | 73 X<br/> |
79 X | 74 X |
80 </div> | 75 </div> |
81 </body> | |
82 | 76 |
83 <script src="resources/rounded-rectangle.js"></script> | 77 <script src="../resources/rounded-rectangle.js"></script> |
84 <script src="resources/subpixel-utils.js"></script> | 78 <script src="../resources/subpixel-utils.js"></script> |
85 <script> | 79 <script> |
86 genLeftRightRoundedRectFloatShapeOutsideRefTest({ | 80 genLeftRightRoundedRectFloatShapeOutsideRefTest({ |
87 roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 160, ry: 80}, | 81 roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 160, ry: 80}, |
88 containerWidth: 500, | 82 containerWidth: 500, |
89 containerHeight: 200, | 83 containerHeight: 200, |
90 lineHeight: 20, | 84 lineHeight: 20, |
91 floatElementClassSuffix: "ellipse-float-line", | 85 floatElementClassSuffix: "ellipse-float-line", |
92 insertElementIdSuffix: "ellipse-outline" | 86 insertElementIdSuffix: "ellipse-outline" |
93 }); | 87 }); |
94 </script> | 88 </script> |
95 | 89 |
96 </html> | 90 </body> |
OLD | NEW |