Re-import the css/css-shapes WPT
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-shapes / shape-outside / shape-image / shape-image-027.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CSS Test: left float, url(png), real negative offset image + shape-margin (px)</title>
5     <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
6     <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
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="match" href="reference/shape-image-006-ref.html"/>
10     <meta name="flags" content="ahem"/>
11     <meta name="assert" content="This test verifies that content wraps around all the image pixels
12                                  + the shape-margin when shape-outside is given a png file.
13                                  Additionally, the shape-outside: image element is given a negative
14                                  left offset relative to its containing block."/>
15     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
16     <style type="text/css">
17         body {
18             margin: 0;
19         }
20         .container {
21           left: 10px;
22           font: 50px/1 Ahem;
23         }
24         #test {
25             width: 200px;
26             color: rgb(0,100,0);
27         }
28         #image {
29             float: left;
30             shape-outside: url("support/left-half-rectangle.png");
31             shape-margin: 20px;
32             margin-left: -10px;
33             width: 100px;
34             height: 100px;
35         }
36         .blue {
37             width: 2px;
38             height: 100px;
39             background-color: blue;
40         }
41         .left-line { left: 65px; }
42         .right-line { left: 125px; }
43
44         .failure {
45             left: 70px;
46             width: 50px;
47             height: 100px;
48             background-color: red;
49             z-index: -1;
50         }
51         .container, .blue, .failure {
52             position: absolute;
53             top: 70px;
54         }
55     </style>
56 </head>
57 <body>
58     <p>
59         The test passes if the green rectangle on the right is completely between the two blue lines.
60         There should be no red.
61     </p>
62     <div id="test" class="container">
63         <div id="image"><img src="support/left-half-rectangle.png" style="margin-left: 10px"/></div>
64         X<br/>X
65     </div>
66     <div class="blue left-line"></div>
67     <div class="blue right-line"></div>
68     <div class="failure"></div>
69 </body>
70 </html>