16dba7e6da5b4cce80103fb3383aa1d4945e4a5a
[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     <style type="text/css">
17         body { margin: 0; }
18         .container {
19             width: 200px;
20             height: 200px;
21             font-family: Ahem;
22             font-size: 10px;
23             line-height: 1;
24         }
25         #test {
26             color: green;
27         }
28         #gradient {
29             float: left;
30             width: 100px;
31             height: 100px;
32             shape-outside: radial-gradient(circle, green 0px, transparent 50px);
33         }
34     </style>
35 </head>
36 <body>
37     <p>
38         The test passes if you see green boxes following the contour of a circle. There should be no red.
39     </p>
40     <div id="test" class="container">
41         x</br>
42         <div id="gradient"></div>
43         <span id='test0'>x</span><br/>
44         <span id='test1'>x</span><br/>
45         <span id='test2'>x</span><br/>
46         <span id='test3'>x</span><br/>
47         <span id='test4'>x</span><br/>
48         <span id='test5'>x</span><br/>
49         <span id='test6'>x</span><br/>
50         <span id='test7'>x</span><br/>
51         <span id='test8'>x</span><br/>
52         <span id='test9'>x</span><br/>
53         x<br/>
54     </div>
55     <div id="log"></div>
56     <script>
57         verifyTextPoints({
58                 roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50},
59                 containerWidth: 200,
60                 containerHeight: 200,
61                 lineHeight: 10
62         }, 10, 1.5);
63      </script>
64 </body>
65 </html>