Re-import the css/css-shapes WPT
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-shapes / shape-outside / supported-shapes / circle / shape-outside-circle-031-expected.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <title>CSS Reference File</title>
5         <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
6     </head>
7     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
8     <style>
9         body {
10             margin: 0;
11         }
12         .container {
13             position: relative;
14             font: 15px Ahem, sans-serif;
15             line-height: 20px;
16             width: 200px;
17             height: 200px;
18             color: green;
19         }
20         .circle {
21             z-index: -1;
22             width: 160px;
23             height: 160px;
24             border-radius: 80px;
25             background-color: blue;
26             overflow: hidden;
27         }
28         #left-circle-outline {
29             position: absolute;
30             top: 20px;
31             left: 0px;
32         }
33         .left-circle-float-line {
34             float: left;
35             clear: left;
36             height: 20px;
37         }
38     </style>
39     <body>
40         <p>The test passes if all of the squares are green. There should be no red.</p>
41         <div class="container">
42         X<br/>
43             <div id="left-circle-outline"></div>
44             <!--  generated left-rounded-rect-float-line divs will be inserted here  -->
45         X<br/>
46         X<br/>
47         X<br/>
48         X<br/>
49         X<br/>
50         X<br/>
51         X<br/>
52         X<br/>
53         X
54         </div>
55
56         <script src="../../support/rounded-rectangle.js"></script>
57         <script src="../../support/subpixel-utils.js"></script>
58         <script>
59         genLeftRoundedRectFloatShapeOutsideRefTest({
60             roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
61             containerWidth: 200,
62             containerHeight: 200,
63             lineHeight: 20,
64             floatElementClassSuffix: "circle-float-line",
65             insertElementIdSuffix: "circle-outline"
66         });
67         </script>
68     </body>
69 </html>
70