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-011.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CSS Test: left float, url(svg), real image + shape-image-threshold + shape-margin (px)</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/#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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/>
10     <link rel="match" href="reference/shape-image-007-ref.html"/>
11     <meta name="flags" content="ahem"/>
12     <meta name="assert" content="This test verifies that content wraps around the image pixels extracted from
13                                  a shape-outside svg file with shape-image-threshold set + the shape-margin in
14                                  absolute length."/>
15     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
16     <style type="text/css">
17         body { margin: 0; }
18         #test, #image, #white, .blue, .failure {
19             position: absolute;
20             top: 70px;
21         }
22         #test, #image { left: 10px; }
23         #image { z-index: -2; }
24
25         #white {
26             left: 60px;
27             width: 10px;
28             height: 100px;
29             background-color: white;
30             z-index: -1;
31         }
32         #test {
33           font: 50px/1 Ahem;
34           width: 200px;
35           color: rgb(0,100,0);
36           z-index: 2;
37         }
38         #shape-image {
39             float: left;
40             width: 100px;
41             height: 100px;
42             shape-outside: url("support/left-half-rectangle-50.svg");
43             shape-margin: 10px;
44             shape-image-threshold: 0.55;
45         }
46         .blue {
47             width: 2px;
48             height: 100px;
49             background-color: blue;
50             z-index: 3;
51         }
52         .left-line { left: 65px; }
53         .right-line { left: 125px; }
54
55         .failure {
56             left: 70px;
57             width: 50px;
58             height: 100px;
59             background-color: red;
60             z-index: 1;
61         }
62     </style>
63 </head>
64 <body>
65     <p>
66         The test passes if the green rectangle on the right is completely between the two blue lines.
67         There should be no red.
68     </p>
69     <img id="image" src="support/left-half-rectangle-50.svg"/>
70     <div id="white"></div>
71     <div id="test">
72         <div id="shape-image"></div>
73         X<br/>X
74     </div>
75     <div class="blue left-line"></div>
76     <div class="blue right-line"></div>
77     <div class="failure"></div>
78 </body>
79 </html>