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

Side by Side Diff: LayoutTests/imported/csswg-test/css-shapes-1/shape-outside/shape-image/shape-image-023.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: right float, url(svg), data uri + shape-image-threshold + s hape-margin (%)</title>
5 <link rel="author" title="Hans Muller" href="hmuller@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-image-023-ref.html"/>
9 <meta name="flags" content="ahem"/>
10 <meta name="assert" content="This test verifies the boundary of a shape-outs ide defined by an SVG URI, shape-image-threshold, and a shape-margin."/>
11 <style type="text/css">
12 #container {
13 position: relative;
14 width: 200px;
15 font-family: Ahem;
16 font-size: 40px;
17 text-align: right;
18 color: green;
19 }
20 #image {
21 float: right;
22 margin-left: 100px;
23 margin-top: 10px;
24 margin-bottom: 100px;
25 shape-outside: url("data:image/svg+xml;utf8,<svg width='20px' height ='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill ='rgba(0,0,255, 0.5)'/></svg>");
26 shape-image-threshold: 0.4;
27 shape-margin: 5%;
28 }
29 #failure {
30 position: absolute;
31 top: 0px;
32 left: 130px; /* container.width - shape-outside+margin.width - font- size */
33 width: 200px;
34 text-align: left;
35 color: red;
36 z-index: -1;
37 }
38 </style>
39 </head>
40 <body>
41 <p>The two green squares should appear 10 pixels to the left of and 10 pixel s below the blue square, respectively. The test passes if no red is visible.</p>
42 <div id="container">
43 <img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='2 0px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='r gb(0,0,255)'/></svg>"/>
44 X<br>X
45 <div id="failure">
46 X<br><span style="margin-left: 30px">X</span>
47 </div>
48 </div>
49 </body>
50 </html>
51
52
53
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698