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-017.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <title>CSS Test: right float, polygon + shape-margin beyond 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-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/#shape-margin-property">
9         <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior">
10         <link rel="match" href="reference/shape-outside-polygon-017-ref.html">
11         <meta name="flags" content="ahem" />
12         <meta name="assert" content="The test verifies that when a shape-margin is defined that
13                                      extends beyond the margin box, the shape is clipped to the
14                                      box.">
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: absolute;
23         top: 50px;
24         font: 40px/1 Ahem, sans-serif;
25         width: 300px;
26         height: 200px;
27         color: green;
28         text-align: right;
29     }
30     #test-shape {
31         float: right;
32         width: 180px;
33         height: 160px;
34         margin: 10px;
35         shape-margin: 40px;
36         shape-outside: polygon(0px 130px, 0px 180px, 200px 180px, 200px 0px, 160px 0px, 160px 130px);
37     }
38     .line {
39         position: absolute;
40         top: 60px;
41         width: 2px;
42         height: 200px;
43         border-left: 2px solid blue;
44     }
45     .right {
46         left: 220px;
47     }
48     .left {
49         left: 60px;
50     }
51     .failure {
52         position: absolute;
53         width: 40px;
54         height: 40px;
55         background-color: red;
56         z-index: -1;
57     }
58     .square-1 {
59         top: 90px;
60         left: 180px;
61     }
62     .square-2 {
63         top: 170px;
64         left: 60px;
65     }
66     </style>
67     <body>
68     <p>The test passes if there there are two green squares between the blue lines. There should be no red.</p>
69     <div id="container">
70         <div id="test-shape"></div>
71         <br/>
72         X
73         <br/>
74         <br/>
75         X
76     </div>
77     <div class="left line"></div>
78     <div class="right line"></div>
79     <div class="failure square-1"></div>
80     <div class="failure square-2"></div>
81     </body>
82 </html>
83