[css shapes] layout for new ellipse syntax
[WebKit-https.git] / LayoutTests / fast / shapes / shape-outside-floats / shape-outside-floats-ellipse-000-expected.html
1 <!DOCTYPE html>
2 <style>
3 .container {
4     position: relative;
5     font: 20px/1 Ahem, sans-serif;
6     width: 500px;
7     height: 200px;
8     border: 1px solid black;
9 }
10
11 .ellipse {
12     z-index: -1;
13     width: 320px;
14     height: 160px;
15     border-radius: 160px / 80px;
16     background-color: blue;
17     overflow: hidden;
18 }
19
20 #left-ellipse-outline {
21     position: absolute;
22     top: 20px;
23     left: 0px;
24 }
25
26 #right-ellipse-outline {
27     position: absolute;
28     top: 20px;
29     right: 0px;
30 }
31
32 .left-ellipse-float-line {
33     float: left;
34     clear: left;
35     height: 20px;
36 }
37
38 .right-ellipse-float-line {
39     float: right;
40     clear: right;
41     height: 20px;
42 }
43 </style>
44 <body>
45 <p>The black squares should trace the right side of the ellipse's blue outline.</p>
46 <div class="container">
47 X<br/>
48     <div id="left-ellipse-outline" class="ellipse"></div>
49     <!--  generated left-rounded-rect-float-line divs will be inserted here  -->
50 X<br/>
51 X<br/>
52 X<br/>
53 X<br/>
54 X<br/>
55 X<br/>
56 X<br/>
57 X<br/>
58 X
59 </div>
60
61 <p>The black squares should trace the left side of the ellipse's blue outline.</p>
62 <div class="container" style="text-align: right">
63 X<br/>
64     <div id="right-ellipse-outline" class="ellipse"></div>
65     <!--  generated right-rounded-rect-float-line divs will be inserted here  -->
66 X<br/>
67 X<br/>
68 X<br/>
69 X<br/>
70 X<br/>
71 X<br/>
72 X<br/>
73 X<br/>
74 X
75 </div>
76
77 <script src="../resources/rounded-rectangle.js"></script>
78 <script src="../resources/subpixel-utils.js"></script>
79 <script>
80 genLeftRightRoundedRectFloatShapeOutsideRefTest({
81     roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 160, ry: 80},
82     containerWidth: 500,
83     containerHeight: 200,
84     lineHeight: 20,
85     floatElementClassSuffix: "ellipse-float-line",
86     insertElementIdSuffix: "ellipse-outline"
87 });
88 </script>
89
90 </body>