OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>shape-outside-floats-rounded-rectangle-004-reference.html</title> | 2 <title>shape-outside-floats-rounded-rectangle-004-reference.html</title> |
| 3 <link rel="author" title="Adobe" href="http://html.adobe.com/"> |
3 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"> | 4 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"> |
4 <meta name="flags" content="ahem dom"> | 5 <meta name="flags" content="ahem dom"> |
5 <style> | 6 <style> |
6 .container { | 7 .container { |
7 position: relative; | 8 position: relative; |
8 font: 10px/1 Ahem, sans-serif; | 9 font: 20px/1 Ahem, sans-serif; |
9 width: 80px; | 10 line-height: 20px; |
10 height: 40px; | 11 width: 160px; |
11 border: 1px solid black; | 12 height: 80px; |
12 margin: 5px; | 13 margin: 5px; |
13 } | 14 } |
14 .rounded-rect { | 15 .rounded-rect { |
15 position: absolute; | 16 position: absolute; |
| 17 z-index: -1; |
16 top: 0px; | 18 top: 0px; |
17 left: 0px; | 19 left: 0px; |
18 width: 40px; | 20 width: 80px; |
19 height: 40px; | 21 height: 80px; |
20 border: 1px solid blue; | 22 border: 1px solid blue; |
21 border-radius: 50%; | 23 border-radius: 50%; |
22 } | 24 } |
23 .left-rounded-rect-float-line { | 25 .left-rounded-rect-float-line { |
24 float: left; | 26 float: left; |
25 clear: left; | 27 clear: left; |
26 height: 10px; | 28 height: 20px; |
27 } | 29 } |
28 </style> | 30 </style> |
29 <body> | 31 <body> |
30 <div class="container"> | 32 <div class="container"> |
31 <div id="left-fixed-units" class="rounded-rect"></div> | 33 <div id="left-fixed-units" class="rounded-rect"></div> |
32 X<br/> | 34 X<br/> |
33 X<br/> | 35 X<br/> |
34 X<br/> | 36 X<br/> |
35 X | 37 X |
36 </div> | 38 </div> |
(...skipping 14 matching lines...) Expand all Loading... |
51 <div class="container"> | 53 <div class="container"> |
52 <div id="left-edge-case" class="rounded-rect"></div> | 54 <div id="left-edge-case" class="rounded-rect"></div> |
53 X<br/> | 55 X<br/> |
54 X<br/> | 56 X<br/> |
55 X<br/> | 57 X<br/> |
56 X | 58 X |
57 </div> | 59 </div> |
58 <script src="resources/rounded-rectangle.js"></script> | 60 <script src="resources/rounded-rectangle.js"></script> |
59 <script src="resources/subpixel-utils.js"></script> | 61 <script src="resources/subpixel-utils.js"></script> |
60 <script> | 62 <script> |
61 // Note that the border must be added into the width to account for its | |
62 // affect on float positioning. | |
63 genLeftRoundedRectFloatShapeOutsideRefTest({ | 63 genLeftRoundedRectFloatShapeOutsideRefTest({ |
64 roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20}, | 64 roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40}, |
65 containerWidth: 80, | 65 containerWidth: 160, |
66 containerHeight: 40, | 66 containerHeight: 80, |
67 lineHeight: 10, | 67 lineHeight: 20, |
68 floatElementClassSuffix: "rounded-rect-float-line", | 68 floatElementClassSuffix: "rounded-rect-float-line", |
69 insertElementIdSuffix: "fixed-units" | 69 insertElementIdSuffix: "fixed-units" |
70 }); | 70 }); |
71 genLeftRoundedRectFloatShapeOutsideRefTest({ | 71 genLeftRoundedRectFloatShapeOutsideRefTest({ |
72 roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20}, | 72 roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40}, |
73 containerWidth: 80, | 73 containerWidth: 160, |
74 containerHeight: 40, | 74 containerHeight: 80, |
75 lineHeight: 10, | 75 lineHeight: 20, |
76 floatElementClassSuffix: "rounded-rect-float-line", | 76 floatElementClassSuffix: "rounded-rect-float-line", |
77 insertElementIdSuffix: "relative-units" | 77 insertElementIdSuffix: "relative-units" |
78 }); | 78 }); |
79 genLeftRoundedRectFloatShapeOutsideRefTest({ | 79 genLeftRoundedRectFloatShapeOutsideRefTest({ |
80 roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20}, | 80 roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40}, |
81 containerWidth: 80, | 81 containerWidth: 160, |
82 containerHeight: 40, | 82 containerHeight: 80, |
83 lineHeight: 10, | 83 lineHeight: 20, |
84 floatElementClassSuffix: "rounded-rect-float-line", | 84 floatElementClassSuffix: "rounded-rect-float-line", |
85 insertElementIdSuffix: "different-units" | 85 insertElementIdSuffix: "different-units" |
86 }); | 86 }); |
87 genLeftRoundedRectFloatShapeOutsideRefTest({ | 87 genLeftRoundedRectFloatShapeOutsideRefTest({ |
88 roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20}, | 88 roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40}, |
89 containerWidth: 80, | 89 containerWidth: 160, |
90 containerHeight: 40, | 90 containerHeight: 80, |
91 lineHeight: 10, | 91 lineHeight: 20, |
92 floatElementClassSuffix: "rounded-rect-float-line", | 92 floatElementClassSuffix: "rounded-rect-float-line", |
93 insertElementIdSuffix: "edge-case" | 93 insertElementIdSuffix: "edge-case" |
94 }); | 94 }); |
95 </script> | 95 </script> |
96 </body> | 96 </body> |
OLD | NEW |