Re-import the css/css-shapes WPT
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-shapes / spec-examples / shape-outside-011.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CSS Test: Shape from image - url(), alpha channel, opacity > 0</title>
5     <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
6     <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/>
7     <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
8     <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
9     <meta name="flags" content="ahem dom"/>
10     <meta name="assert" content="This test verifies that the content flows around the
11                                  shape defined in the images alpha channel that has some
12                                  opacity."/>
13     <!-- This test is derived from Example 7 in this version of the spec:
14          http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ -->
15     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
16     <style type="text/css">
17         .container {
18           width: 400px;
19           font-family: Ahem;
20           font-size: 20px;
21           line-height: 2em;
22         }
23         #test {
24             color: green;
25         }
26         #image {
27             float: left;
28             shape-outside: url("support/circle-shadow.png");
29         }
30     </style>
31     <script src="/resources/testharness.js"></script>
32     <script src="/resources/testharnessreport.js"></script>
33     <script src="support/spec-example-utils.js"></script>
34     <script>
35     function checkFloats() {
36       approxShapeTest('test', 'line-', 2, [218, 236, 238, 236, 218, 160]);
37     }
38     </script>
39 </head>
40 <body onload="checkFloats();">
41     <p>
42         The test passes if the green horizontal bars are to the right of the circle,
43         and no bars intersect the circle's shadow. There should be no red.
44     </p>
45     <div id="test" class="container">
46         <img id="image" src="support/circle-shadow.png"/>
47         <span id="line-0">XXXXXX</span>
48         <span id="line-1">XXXXXX</span>
49         <span id="line-2">XXXXXX</span>
50         <span id="line-3">XXXXXX</span>
51         <span id="line-4">XXXXXX</span>
52         <span id="line-5">XXXXXX</span>
53     </div>
54     <div id="log"></div>
55 </body>
56 </html>