| 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 |