[CSS Shapes] New positioning model: support for rounded rectangle shape-outside
[WebKit-https.git] / LayoutTests / csswg / submitted / shapes / shape-outside / shape-outside-floats-rounded-rectangle-002-expected.html
1 <!DOCTYPE html>
2 <title>shape-outside-floats-rounded-rectangle-002-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     line-height: 20px;
10     width: 500px;
11     height: 200px; 
12     border: 1px solid black;    
13 }
14
15 .rounded-rect-circle {
16     width: 160px;
17     height: 160px;
18     border-radius: 80px;
19     border: 1px solid blue;
20 }
21
22 #left-rounded-rect-circle-outline {
23     position: absolute;
24     top: 20px;
25     left: 0px;
26 }
27
28 #right-rounded-rect-circle-outline {
29     position: absolute;
30     top: 20px;
31     right: 0px;
32 }
33
34 .left-rounded-rect-circle-float-line {
35     float: left;
36     clear: left;
37     height: 20px;
38 }
39
40 .right-rounded-rect-circle-float-line {
41     float: right;
42     clear: right;
43     height: 20px;
44 }
45 </style>
46
47 <body>
48 <p>The black squares should trace the right side of the circle's blue outline.</p>
49 <div class="container">
50 X<br/>
51     <div id="left-rounded-rect-circle-outline" class="rounded-rect-circle"></div> 
52     <!-- generated left-rounded-rect-float-line divs will be inserted here -->
53 X<br/>
54 X<br/>
55 X<br/>
56 X<br/>
57 X<br/>
58 X<br/>
59 X<br/>
60 X<br/>
61 X
62 </div>
63
64 <p>The black squares should trace the left side of the circle's blue outline.</p>
65 <div class="container" style="text-align: right">
66 X<br/>
67     <div id="right-rounded-rect-circle-outline" class="rounded-rect-circle"></div>
68     <!-- generated right-rounded-rect-float-line divs will be inserted here -->
69 X<br/>
70 X<br/>
71 X<br/>
72 X<br/>
73 X<br/>
74 X<br/>
75 X<br/>
76 X<br/>
77 X
78 </div>
79 </body>
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 affect
85 // 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: "rounded-rect-circle-float-line",
92     insertElementIdSuffix: "rounded-rect-circle-outline"
93 });
94 </script>