Sync additional web-platform-tests directories up to 197cdad
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-shapes / shape-outside / supported-shapes / circle / shape-outside-circle-027.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <title>CSS Test: right float, circle with radius in % units + shape-margin + margin-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/#content-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 positioned from the margin box with a
15                                      shape-margin.">
16     </head>
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         text-align: right;
30     }
31     #test-shape {
32         float: right;
33         width: 110px;
34         height: 110px;
35         margin: 10px;
36         padding: 10px;
37         border: 10px solid transparent;
38         shape-margin: 15px;
39         shape-outside: margin-box circle(60px);
40     }
41     #line {
42         position: absolute;
43         top: 0px;
44         left: 140px;
45         width: 2px;
46         height: 200px;
47         border-left: 2px solid blue;
48     }
49     #failure {
50         position: absolute;
51         top: 80px;
52         left: 100px;
53         width: 40px;
54         height: 40px;
55         background-color: red;
56         z-index: -1;
57     }
58     </style>
59     <body>
60     <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
61     <div id="container">
62         <div id="test-container">
63             <div id="test-shape"></div>
64             <br/>
65             <br/>
66             X
67         </div>
68         <div id="line"></div>
69         <div id="failure"></div>
70     </div>
71     </body>
72 </html>
73