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-linear-gradient-003.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CSS Test: Right float with linear 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     <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
9     <link rel="match" href="reference/shape-outside-linear-gradient-002-ref.html"/>
10     <meta name="flags" content="ahem"/>
11     <meta name="assert" content="This test verifies that shape-outside respects a
12                                 simple linear gradient on a right float with
13                                 shape-margin applied."/>
14     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
15     <style type="text/css">
16         .container {
17             width: 200px;
18             height: 200px;
19             background-color: red;
20             font-family: Ahem;
21             font-size: 50px;
22             line-height: 1;
23         }
24         #test {
25             color: green;
26         }
27         #gradient {
28             float: right;
29             width: 200px;
30             height: 200px;
31             background: linear-gradient(to left, green 50%, transparent 50%);
32             shape-outside: linear-gradient(to left, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.75) 40%, transparent 40%);
33             shape-margin: 20px;
34         }
35     </style>
36 </head>
37 <body>
38     <p>
39         The test passes if you see a green square. There should be no red.
40     </p>
41     <div id="test" class="container">
42         <div id="gradient"></div>
43         xx xx xx xx
44     </div>
45 </body>
46 </html>