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