03c71fba4c329f439de8140148f5a8373958d43b
[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     <style type="text/css">
16         body { margin: 0; }
17         #test, #image, #white, .blue, .failure {
18             position: absolute;
19             top: 70px;
20         }
21         #test, #image { left: 10px; }
22         #image { z-index: -2; }
23
24         #white {
25             left: 60px;
26             width: 10px;
27             height: 100px;
28             background-color: white;
29             z-index: -1;
30         }
31         #test {
32           font: 50px/1 Ahem;
33           width: 200px;
34           color: rgb(0,100,0);
35           z-index: 2;
36         }
37         #shape-image {
38             float: left;
39             width: 100px;
40             height: 100px;
41             shape-outside: url("support/left-half-rectangle-50.svg");
42             shape-margin: 10px;
43             shape-image-threshold: 0.55;
44         }
45         .blue {
46             width: 2px;
47             height: 100px;
48             background-color: blue;
49             z-index: 3;
50         }
51         .left-line { left: 65px; }
52         .right-line { left: 125px; }
53
54         .failure {
55             left: 70px;
56             width: 50px;
57             height: 100px;
58             background-color: red;
59             z-index: 1;
60         }
61     </style>
62 </head>
63 <body>
64     <p>
65         The test passes if the green rectangle on the right is completely between the two blue lines.
66         There should be no red.
67     </p>
68     <img id="image" src="support/left-half-rectangle-50.svg"/>
69     <div id="white"></div>
70     <div id="test">
71         <div id="shape-image"></div>
72         X<br/>X
73     </div>
74     <div class="blue left-line"></div>
75     <div class="blue right-line"></div>
76     <div class="failure"></div>
77 </body>
78 </html>