OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>shape-outside-floats-rounded-rectangle-001-reference.html</title> | 2 <title>shape-outside-floats-rounded-rectangle-001-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: 20px/1 Ahem, sans-serif; | 9 font: 20px/1 Ahem, sans-serif; |
9 line-height: 20px; | 10 line-height: 20px; |
10 width: 500px; | 11 width: 500px; |
11 height: 200px; | 12 height: 200px; |
12 border: 1px solid black; | 13 border: 1px solid black; |
13 } | 14 } |
14 | 15 |
15 .rounded-rect { | 16 .rounded-rect { |
16 width: 320px; | 17 width: 320px; |
17 height: 160px; | 18 height: 160px; |
18 border-radius: 60px; | 19 border-radius: 60px; |
19 border: 1px solid blue; | 20 border: 1px solid blue; |
20 } | 21 } |
21 | 22 |
22 #left-rounded-rect-outline { | 23 #left-rounded-rect-outline { |
23 position: absolute; | 24 position: absolute; |
| 25 z-index: -1; |
24 top: 20px; | 26 top: 20px; |
25 left: 0px; | 27 left: 0px; |
26 } | 28 } |
27 | 29 |
28 #right-rounded-rect-outline { | 30 #right-rounded-rect-outline { |
29 position: absolute; | 31 position: absolute; |
| 32 z-index: -1; |
30 top: 20px; | 33 top: 20px; |
31 right: 0px; | 34 right: 0px; |
32 } | 35 } |
33 | 36 |
34 .left-rounded-rect-float-line { | 37 .left-rounded-rect-float-line { |
35 float: left; | 38 float: left; |
36 clear: left; | 39 clear: left; |
37 height: 20px; | 40 height: 20px; |
38 } | 41 } |
39 | 42 |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
85 // on float positioning. | 88 // on float positioning. |
86 genLeftRightRoundedRectFloatShapeOutsideRefTest({ | 89 genLeftRightRoundedRectFloatShapeOutsideRefTest({ |
87 roundedRect: {x: 0, y: 20, width: 321, height: 160, rx: 60, ry: 60}, | 90 roundedRect: {x: 0, y: 20, width: 321, height: 160, rx: 60, ry: 60}, |
88 containerWidth: 500, | 91 containerWidth: 500, |
89 containerHeight: 200, | 92 containerHeight: 200, |
90 lineHeight: 20, | 93 lineHeight: 20, |
91 floatElementClassSuffix: "rounded-rect-float-line", | 94 floatElementClassSuffix: "rounded-rect-float-line", |
92 insertElementIdSuffix: "rounded-rect-outline" | 95 insertElementIdSuffix: "rounded-rect-outline" |
93 }); | 96 }); |
94 </script> | 97 </script> |
OLD | NEW |