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-017.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CSS Test: Image shape on a right float</title>
5     <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@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="match" href="reference/shape-image-002-ref.html"/>
9     <meta name="flags" content="ahem image"/>
10     <meta name="assert" content="This test verifies that a shape specified as a data uri svg with 70% alpha creates a proper shape, shape-image-threshold is defined to 0.71."/>
11     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
12     <style type="text/css">
13         .container {
14               position: relative;
15               font-family: Ahem;
16               font-size: 50px;
17               line-height: 50px;
18         }
19         #test {
20             width: 100px;
21             color: rgb(0, 100, 0);
22             background-color: red;
23         }
24         #image {
25             float: right;
26             shape-outside: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsMCwwLDAuNykiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGw9IiMwMDY0MDAiIGQ9Ik01MCwwaDUwYzAsMzMuMywwLDY2LjcsMCwxMDBINTBWMHoiLz4NCjwvc3ZnPg0K");
27             shape-image-threshold: 0.71;
28         }
29     </style>
30 </head>
31 <body>
32     <p>
33         The test passes if you see a solid green square. There should be no red.
34     </p>
35     <div id="test" class="container">
36         <img id="image" src="support/right-half-rectangle-70.svg"/>
37         X
38         X
39     </div>
40 </body>
41 </html>