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