Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(426)

Side by Side Diff: LayoutTests/imported/csswg-test/css-shapes-1/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html

Issue 816533002: Import CSSWG Shapes tests (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: One more test expectations update Created 6 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
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-prop erty"/>
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, transparen t 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 rig ht. 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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698