Re-import the css/css-shapes WPT
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-shapes / shape-outside / supported-shapes / ellipse / shape-outside-ellipse-031.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <title>CSS Test: left float, ellipse radii in % units</title>
5         <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
6         <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
7         <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
8         <link rel="match" href="reference/shape-outside-ellipse-030-ref.html">
9         <meta name="flags" content="ahem dom" />
10         <meta name="assert" content="The test verifies that text wraps around a
11                                      left float with a shape-outside defined as
12                                      an ellipse with radii in % units.">
13     </head>
14     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
15     <style>
16     body {
17         margin: 0;
18     }
19     .container {
20         font: 15px Ahem, sans-serif;
21         line-height: 20px;
22         width: 400px;
23         height: 200px;
24         color: green;
25     }
26     .ellipse {
27         width: 160px;
28         height: 160px;
29         shape-outside: ellipse(50% 25% at 50% 25%);
30     }
31     </style>
32     <body>
33     <p>The test passes if all of the squares are green. There should be no red.</p>
34     <div class="container">
35         X<br/>
36         <div style="float: left" class="ellipse"></div>
37         <span id="test0">X</span><br/>
38         <span id="test1">X</span><br/>
39         <span id="test2">X</span><br/>
40         <span id="test3">X</span><br/>
41         <span id="test4">X
42     </div>
43       <script src="../support/rounded-rectangle.js"></script>
44       <script src="../support/subpixel-utils.js"></script>
45       <script src="../support/test-utils.js"></script>
46       <script>
47         verifyTextPoints({
48                 roundedRect: {x: 0, y: 20, width: 160, height: 80, rx: 80, ry: 40},
49                 containerWidth: 200,
50                 containerHeight: 200,
51                 lineHeight: 20
52         }, 9);
53      </script>
54     </body>
55 </html>
56