6042c8067c4b44658dbe900d650f52c5248b23d3
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-shapes / shape-outside / shape-image / gradients / shape-outside-linear-gradient-001.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CSS Test: Left 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="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
9     <meta name="flags" content="ahem"/>
10     <meta name="assert" content="This test verifies that shape-outside respects a
11                                 simple linear gradient."/>
12     <style type="text/css">
13         .container {
14             width: 200px;
15             height: 200px;
16             background-color: red;
17             font-family: Ahem;
18             font-size: 50px;
19             line-height: 1;
20         }
21         #test {
22             color: green;
23         }
24         #gradient {
25             float: left;
26             width: 200px;
27             height: 200px;
28             background: linear-gradient(to right, green 50%, transparent 50%);
29             shape-outside: linear-gradient(to right, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.5) 50%, transparent 50%);
30         }
31     </style>
32 </head>
33 <body>
34     <p>
35         The test passes if you see a green square. There should be no red.
36     </p>
37     <div id="test" class="container">
38         <div id="gradient"></div>
39         xx xx xx xx
40     </div>
41 </body>
42 </html>