1acca24e7a904f57c3d843a3c568e2bca943cde0
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-shapes / shape-outside / shape-image / gradients / shape-outside-linear-gradient-004.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CSS Test: Shape outside and repeating linear gradient</title>
5     <link rel="author" title="Alan Stearns" href="mailto:stearns@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-004-ref.html"/>
9     <meta name="assert" content="This test verifies that content wraps correctly around a shape defined by a repeating linear gradient."/>
10     <style type="text/css">
11         .container {
12             position: absolute;
13             top: 70px;
14             width: 199px;
15             font-size: 0px;
16         }
17         .square {
18             display: inline-block;
19             width: 100px;
20             height: 100px;
21             line-height: 100px;
22             background-color: green;
23         }
24         .gradient {
25             float: left;
26             width: 100px;
27             height: 400px;
28             shape-outside: repeating-linear-gradient(transparent 0px, transparent 100px, white 200px);
29             shape-image-threshold: 0.5;
30         }
31         #failure {
32             position: absolute;
33             top: 70px;
34             width: 200px;
35             font-size: 0px;
36             z-index: -1;
37         }
38         #failure > .square {
39             background-color: red;
40         }
41         #failure > .right {
42             margin-left: 100px;
43         }
44     </style>
45 </head>
46 <body>
47     <p>
48         The test passes if there are four green squares alternating left and right. There
49         should be no red.
50     </p>
51     <div id="test" class="container">
52         <div class="gradient"></div>
53         <div class="square"></div>
54         <div class="square"></div>
55         <div class="square"></div>
56         <div class="square"></div>
57     </div>
58     <div id="failure">
59         <div class="square"></div><br>
60         <div class="square right"></div><br>
61         <div class="square"></div><br>
62         <div class="square right"></div>
63     </div>
64 </body>
65 </html>