[CSS Shapes] New positioning model: support for circle and ellipse shape-outside
[WebKit-https.git] / LayoutTests / csswg / submitted / shapes / shape-outside / shape-outside-floats-ellipse-000-expected.html
1 <!DOCTYPE html>
2 <title>shape-outside-floats-ellipse-000-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: 20px/1 Ahem, sans-serif;
9     width: 500px;
10     height: 200px; 
11     border: 1px solid black;    
12 }
13
14 .ellipse {
15     width: 320px;
16     height: 160px;
17     border-radius: 160px / 80px;
18     border: 1px solid blue;
19 }
20
21 #left-ellipse-outline {
22     position: absolute;
23     top: 20px;
24     left: 0px;
25 }
26
27 #right-ellipse-outline {
28     position: absolute;
29     top: 20px;
30     right: 0px;
31 }
32
33 .left-ellipse-float-line {
34     float: left;
35     clear: left;
36     height: 20px;
37 }
38
39 .right-ellipse-float-line {
40     float: right;
41     clear: right;
42     height: 20px;
43 }
44 </style>
45
46 <body>
47 <p>The black squares should trace the right side of the ellipse's blue outline.</p>
48 <div class="container">
49 X<br/>
50     <div id="left-ellipse-outline" class="ellipse"></div> 
51     <!-- generated left-rounded-rect-float-line divs will be inserted here -->
52 X<br/>
53 X<br/>
54 X<br/>
55 X<br/>
56 X<br/>
57 X<br/>
58 X<br/>
59 X<br/>
60 X
61 </div>
62
63 <p>The black squares should trace the left side of the ellipse's blue outline.</p>
64 <div class="container" style="text-align: right">
65 X<br/>
66     <div id="right-ellipse-outline" class="ellipse"></div>
67     <!-- generated right-rounded-rect-float-line divs will be inserted here -->
68 X<br/>
69 X<br/>
70 X<br/>
71 X<br/>
72 X<br/>
73 X<br/>
74 X<br/>
75 X<br/>
76 X
77 </div>
78 </body>
79
80 <script src="resources/rounded-rectangle.js"></script>
81 <script src="resources/subpixel-utils.js"></script>
82 <script>
83 // Note that the border must be added into the width to account for its
84 // affect on float positioning.
85 genLeftRightRoundedRectFloatShapeOutsideRefTest({
86     roundedRect: {x: 0, y: 20, width: 321, height: 160, rx: 160, ry: 80},
87     containerWidth: 500, 
88     containerHeight: 200,
89     lineHeight: 20,
90     floatElementClassSuffix: "ellipse-float-line",
91     insertElementIdSuffix: "ellipse-outline"
92 });
93 </script>
94
95 </html>