Re-import the css/css-shapes WPT
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-shapes / shape-outside / shape-image / gradients / shape-outside-radial-gradient-001.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CSS Test: Left float with radial gradient</title>
5     <link rel="author" title="Bear Travis" href="mailto:betravis@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     <script src="/resources/testharness.js"></script>
9     <script src="/resources/testharnessreport.js"></script>
10     <script src="../../supported-shapes/support/rounded-rectangle.js"></script>
11     <script src="../../supported-shapes/support/subpixel-utils.js"></script>
12     <script src="../../supported-shapes/support/test-utils.js"></script>
13     <meta name="flags" content="ahem dom"/>
14     <meta name="assert" content="This test verifies that shape-outside respects a
15                                 simple radial gradient."/>
16     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
17     <style type="text/css">
18         body { margin: 0; }
19         .container {
20             width: 200px;
21             height: 200px;
22             font-family: Ahem;
23             font-size: 10px;
24             line-height: 1;
25         }
26         #test {
27             color: green;
28         }
29         #gradient {
30             float: left;
31             width: 100px;
32             height: 100px;
33             shape-outside: radial-gradient(circle, green 0px, transparent 50px);
34         }
35     </style>
36 </head>
37 <body>
38     <p>
39         The test passes if you see green boxes following the contour of a circle. There should be no red.
40     </p>
41     <div id="test" class="container">
42         x</br>
43         <div id="gradient"></div>
44         <span id='test0'>x</span><br/>
45         <span id='test1'>x</span><br/>
46         <span id='test2'>x</span><br/>
47         <span id='test3'>x</span><br/>
48         <span id='test4'>x</span><br/>
49         <span id='test5'>x</span><br/>
50         <span id='test6'>x</span><br/>
51         <span id='test7'>x</span><br/>
52         <span id='test8'>x</span><br/>
53         <span id='test9'>x</span><br/>
54         x<br/>
55     </div>
56     <div id="log"></div>
57     <script>
58         verifyTextPoints({
59                 roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50},
60                 containerWidth: 200,
61                 containerHeight: 200,
62                 lineHeight: 10
63         }, 10, 1.5);
64      </script>
65 </body>
66 </html>