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