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-025.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <title>CSS Test: right float, ellipse radii in % at center right + shape-margin + padding-box</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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
9         <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
10         <link rel="match" href="reference/shape-outside-ellipse-021-ref.html">
11         <meta name="flags" content="ahem" />
12         <meta name="assert" content="The test verifies that text wraps around a
13                                      right float with a shape-outside defined as
14                                      a ellipse with the radii in percentage units
15                                      positioned at center right from the margin box
16                                      with a shape-margin.">
17     </head>
18     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
19     <style>
20     body {
21         margin: 0;
22     }
23     #container {
24         position: relative;
25     }
26     #test-container {
27         font: 40px/1 Ahem, sans-serif;
28         width: 300px;
29         height: 200px;
30         color: green;
31         text-align: right;
32     }
33     #test-shape {
34         float: right;
35         width: 110px;
36         height: 110px;
37         margin: 10px;
38         padding: 10px;
39         border: 10px solid transparent;
40         shape-margin: 10px;
41         shape-outside: padding-box ellipse(100% 50% at center right);
42     }
43     #line {
44         position: absolute;
45         top: 0px;
46         left: 140px;
47         width: 2px;
48         height: 200px;
49         border-left: 2px solid blue;
50     }
51     #failure {
52         position: absolute;
53         top: 80px;
54         left: 100px;
55         width: 40px;
56         height: 40px;
57         background-color: red;
58         z-index: -1;
59     }
60     </style>
61     <body>
62     <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
63     <div id="container">
64         <div id="test-container">
65             <div id="test-shape"></div>
66             <br/>
67             <br/>
68             X
69         </div>
70         <div id="line"></div>
71         <div id="failure"></div>
72     </div>
73     </body>
74 </html>
75