Re-import the css/css-shapes WPT
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-shapes / shape-outside / supported-shapes / polygon / shape-outside-polygon-015.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <title>CSS Test: right float, polygon + content-box + shape-margin</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-polygon">
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/#content-box">
9         <link rel="match" href="reference/shape-outside-polygon-010-ref.html">
10         <meta name="flags" content="ahem" />
11         <meta name="assert" content="The test verifies that text wraps around a
12                                      right float with a shape-outside defined as
13                                      an polygon from the content box wtih a shape margin.">
14     </head>
15     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
16     <style>
17         body {
18             margin: 0;
19         }
20         #container {
21             position: absolute;
22             top: 50px;
23             left: 10px;
24             font-size: 20px;
25             font-family: Ahem;
26             line-height: 20px;
27             width: 240px;
28             height: 240px;
29             background-color: red;
30             color: green;
31         }
32         #test-shape {
33             float: right;
34             width: 200px;
35             height: 200px;
36             margin: 5px;
37             border: 10px solid transparent;
38             padding: 5px;
39             shape-margin: 20px;
40             shape-outside: content-box polygon(30% 20%, 100% 20%, 100% 80%, 60% 80%, 60% 70%, 80% 70%, 80% 40%, 30% 40%);
41         }
42         .ref-shape {
43             position: absolute;
44             background-color: green;
45         }
46         #ref-1 {
47             top: 90px;
48             left: 70px;
49             width: 180px;
50             height: 80px;
51         }
52         #ref-2 {
53             top: 170px;
54             left: 170px;
55             width: 80px;
56             height: 20px;
57         }
58         #ref-3 {
59             top: 190px;
60             left: 130px;
61             width: 120px;
62             height: 60px;
63         }
64     </style>
65     <body>
66     <p>The test passes if there is green square and no red.</p>
67     <div id="container">
68         <div id="test-shape"></div>
69         XXXXXXXXXXXX XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
70     </div>
71     <div id="ref-1" class="ref-shape"></div>
72     <div id="ref-2" class="ref-shape"></div>
73     <div id="ref-3" class="ref-shape"></div>
74     </body>
75 </html>