OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <title>CSS Test: Image shape with margin-right + shape-margin on a left floa
t</title> | 4 <title>CSS Test: Image shape with margin-right + shape-margin on a left floa
t</title> |
5 <link rel="author" title="Rebecca Hauck" href="rhauck@adobe.com"/> | 5 <link rel="author" title="Rebecca Hauck" href="rhauck@adobe.com"/> |
6 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"
/> | 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"/> | 7 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-prop
erty"/> |
8 <link rel="help" href="http://www.w3.org/TR/css-shapes/#shape-margin-propert
y"/> | 8 <link rel="help" href="http://www.w3.org/TR/css-shapes/#shape-margin-propert
y"/> |
9 <meta name="flags" content="ahem image"/> | 9 <meta name="flags" content="ahem image"/> |
10 <meta name="assert" content="This test verifies that the image shape that de
fines the float | 10 <meta name="assert" content="This test verifies that the image shape that de
fines the float |
(...skipping 15 matching lines...) Expand all Loading... |
26 #test { | 26 #test { |
27 width: 100px; | 27 width: 100px; |
28 height: 100px; | 28 height: 100px; |
29 color: rgb(0, 100, 0); | 29 color: rgb(0, 100, 0); |
30 } | 30 } |
31 #shape-div { | 31 #shape-div { |
32 float: left; | 32 float: left; |
33 width: 50px; | 33 width: 50px; |
34 height: 180px; | 34 height: 180px; |
35 shape-margin: 20px; | 35 shape-margin: 20px; |
36 shape-outside: url(../resources/square.png); | 36 shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www
.w3.org/2000/svg' width='100px' height='100px'><rect x='0' y='50' width='100' he
ight='100' fill='blue'/></svg>"); |
37 margin-right: 10px; | 37 margin-right: 10px; |
38 } | 38 } |
39 #ref { | 39 #ref { |
40 position: absolute; | 40 position: absolute; |
41 top: 120px; | 41 top: 120px; |
42 } | 42 } |
43 #line { | 43 #line { |
44 width: 100px; | 44 width: 100px; |
45 height: 1px; | 45 height: 1px; |
46 background-color: black; | 46 background-color: black; |
(...skipping 15 matching lines...) Expand all Loading... |
62 <div id="line"></div> | 62 <div id="line"></div> |
63 <div id="failure"></div> | 63 <div id="failure"></div> |
64 </div> | 64 </div> |
65 <div id="test" class="container"> | 65 <div id="test" class="container"> |
66 <div id="shape-div"></div> | 66 <div id="shape-div"></div> |
67 x x | 67 x x |
68 </div> | 68 </div> |
69 </div> | 69 </div> |
70 </body> | 70 </body> |
71 </html> | 71 </html> |
OLD | NEW |