cd64fc98f8a699e766a7a440aee544844ab7ff62
[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="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     border: 1px solid blue;
23     border-radius: 50%;
24 }
25 .left-rounded-rect-float-line {
26     float: left;
27     clear: left;
28     height: 20px;
29 }
30 </style>
31 <body>
32     <div class="container">
33         <div id="left-fixed-units" class="rounded-rect"></div>
34         X<br/>
35         X<br/>
36         X<br/>
37         X
38     </div>
39     <div class="container">
40         <div id="left-relative-units" class="rounded-rect"></div>
41         X<br/>
42         X<br/>
43         X<br/>
44         X
45     </div>
46     <div class="container">
47         <div id="left-different-units" class="rounded-rect"></div>
48         X<br/>
49         X<br/>
50         X<br/>
51         X
52     </div>
53     <div class="container">
54         <div id="left-edge-case" class="rounded-rect"></div>
55         X<br/>
56         X<br/>
57         X<br/>
58         X
59     </div>
60     <script src="resources/rounded-rectangle.js"></script>
61     <script src="resources/subpixel-utils.js"></script>
62     <script>
63     genLeftRoundedRectFloatShapeOutsideRefTest({
64         roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40},
65         containerWidth: 160,
66         containerHeight: 80,
67         lineHeight: 20,
68         floatElementClassSuffix: "rounded-rect-float-line",
69         insertElementIdSuffix: "fixed-units"
70     });
71     genLeftRoundedRectFloatShapeOutsideRefTest({
72         roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40},
73         containerWidth: 160,
74         containerHeight: 80,
75         lineHeight: 20,
76         floatElementClassSuffix: "rounded-rect-float-line",
77         insertElementIdSuffix: "relative-units"
78     });
79     genLeftRoundedRectFloatShapeOutsideRefTest({
80         roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40},
81         containerWidth: 160,
82         containerHeight: 80,
83         lineHeight: 20,
84         floatElementClassSuffix: "rounded-rect-float-line",
85         insertElementIdSuffix: "different-units"
86     });
87     genLeftRoundedRectFloatShapeOutsideRefTest({
88         roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40},
89         containerWidth: 160,
90         containerHeight: 80,
91         lineHeight: 20,
92         floatElementClassSuffix: "rounded-rect-float-line",
93         insertElementIdSuffix: "edge-case"
94     });
95     </script>
96 </body>