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