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