OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
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"/> | |
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="help" href="http://www.w3.org/TR/css-shapes/#shape-margin-propert
y"/> | |
9 <meta name="flags" content="ahem image"/> | |
10 <meta name="assert" content="This test verifies that the image shape that de
fines the float | |
11 area is clipped to the float's margin box and r
espects the | |
12 shape-margin extending beyond the margin-left,
causing the | |
13 text to be pushed below the defined shape."/> | |
14 <style type="text/css"> | |
15 #outer { | |
16 position: relative; | |
17 width: 100px; | |
18 height: 250px; | |
19 } | |
20 .container { | |
21 position: relative; | |
22 font-family: Ahem; | |
23 font-size: 50px; | |
24 line-height: 50px; | |
25 } | |
26 #test { | |
27 width: 100px; | |
28 height: 100px; | |
29 color: rgb(0, 100, 0); | |
30 } | |
31 #shape-div { | |
32 float: left; | |
33 width: 50px; | |
34 height: 180px; | |
35 shape-margin: 20px; | |
36 shape-outside: url(../resources/square.png); | |
37 margin-right: 10px; | |
38 } | |
39 #ref { | |
40 position: absolute; | |
41 top: 120px; | |
42 } | |
43 #line { | |
44 width: 100px; | |
45 height: 1px; | |
46 background-color: black; | |
47 } | |
48 #failure { | |
49 width: 50px; | |
50 height: 99px; | |
51 background-color: red; | |
52 z-index: -1; | |
53 } | |
54 </style> | |
55 </head> | |
56 <body> | |
57 <p> | |
58 The test passes if the green rectangle is below the line. There should b
e no red. | |
59 </p> | |
60 <div id="outer"> | |
61 <div id="ref"> | |
62 <div id="line"></div> | |
63 <div id="failure"></div> | |
64 </div> | |
65 <div id="test" class="container"> | |
66 <div id="shape-div"></div> | |
67 x x | |
68 </div> | |
69 </div> | |
70 </body> | |
71 </html> | |
OLD | NEW |