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