OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <title>shape-outside-floats-rounded-rectangle-004-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> | |
7 .container { | |
8 position: relative; | |
9 font: 20px/1 Ahem, sans-serif; | |
10 line-height: 20px; | |
11 width: 160px; | |
12 height: 80px; | |
13 margin: 5px; | |
14 } | |
15 .rounded-rect { | |
16 position: absolute; | |
17 z-index: -1; | |
18 top: 0px; | |
19 left: 0px; | |
20 width: 80px; | |
21 height: 80px; | |
22 background-color: blue; | |
23 overflow: hidden; | |
24 border-radius: 50%; | |
25 } | |
26 .left-rounded-rect-float-line { | |
27 float: left; | |
28 clear: left; | |
29 height: 20px; | |
30 } | |
31 </style> | |
32 <body> | |
33 <div class="container"> | |
34 <div id="left-fixed-units" class="rounded-rect"></div> | |
35 X<br/> | |
36 X<br/> | |
37 X<br/> | |
38 X | |
39 </div> | |
40 <div class="container"> | |
41 <div id="left-relative-units" class="rounded-rect"></div> | |
42 X<br/> | |
43 X<br/> | |
44 X<br/> | |
45 X | |
46 </div> | |
47 <div class="container"> | |
48 <div id="left-different-units" class="rounded-rect"></div> | |
49 X<br/> | |
50 X<br/> | |
51 X<br/> | |
52 X | |
53 </div> | |
54 <div class="container"> | |
55 <div id="left-edge-case" class="rounded-rect"></div> | |
56 X<br/> | |
57 X<br/> | |
58 X<br/> | |
59 X | |
60 </div> | |
61 <script src="resources/rounded-rectangle.js"></script> | |
62 <script src="resources/subpixel-utils.js"></script> | |
63 <script> | |
64 genLeftRoundedRectFloatShapeOutsideRefTest({ | |
65 roundedRect: {x: 0, y: 0, width: 80, height: 80, rx: 40, ry: 40}, | |
66 containerWidth: 160, | |
67 containerHeight: 80, | |
68 lineHeight: 20, | |
69 floatElementClassSuffix: "rounded-rect-float-line", | |
70 insertElementIdSuffix: "fixed-units" | |
71 }); | |
72 genLeftRoundedRectFloatShapeOutsideRefTest({ | |
73 roundedRect: {x: 0, y: 0, width: 80, height: 80, rx: 40, ry: 40}, | |
74 containerWidth: 160, | |
75 containerHeight: 80, | |
76 lineHeight: 20, | |
77 floatElementClassSuffix: "rounded-rect-float-line", | |
78 insertElementIdSuffix: "relative-units" | |
79 }); | |
80 genLeftRoundedRectFloatShapeOutsideRefTest({ | |
81 roundedRect: {x: 0, y: 0, width: 80, height: 80, rx: 40, ry: 40}, | |
82 containerWidth: 160, | |
83 containerHeight: 80, | |
84 lineHeight: 20, | |
85 floatElementClassSuffix: "rounded-rect-float-line", | |
86 insertElementIdSuffix: "different-units" | |
87 }); | |
88 genLeftRoundedRectFloatShapeOutsideRefTest({ | |
89 roundedRect: {x: 0, y: 0, width: 80, height: 80, rx: 40, ry: 40}, | |
90 containerWidth: 160, | |
91 containerHeight: 80, | |
92 lineHeight: 20, | |
93 floatElementClassSuffix: "rounded-rect-float-line", | |
94 insertElementIdSuffix: "edge-case" | |
95 }); | |
96 </script> | |
97 </body> | |
OLD | NEW |