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