shape-image-024.html (2161B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: shape-outside from img element with different size than the image file</title> 5 <link rel="author" title="Rebecca Hauck" href="mailto: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-property"/> 8 <link rel="match" href="reference/shape-image-024-ref.html"/> 9 <meta name="flags" content="ahem"/> 10 <meta name="assert" content="This test verifies that content wraps around all the image pixels 11 calculated from the size of the img element, which is different 12 than the size of the image itself."/> 13 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 14 <style type="text/css"> 15 body { 16 margin: 0; 17 } 18 .container { 19 left: 10px; 20 font: 100px/1 Ahem; 21 } 22 #test { 23 width: 211px; 24 color: rgb(0,100,0); 25 } 26 #image { 27 float: left; 28 width: 200px; 29 height: 200px; 30 shape-outside: url("support/left-half-rectangle.png"); 31 shape-margin: 10px; 32 } 33 .blue { 34 width: 2px; 35 height: 200px; 36 background-color: blue; 37 } 38 .left-line { left: 115px; } 39 .right-line { left: 230px; } 40 41 .failure { 42 left: 120px; 43 width: 100px; 44 height: 200px; 45 background-color: red; 46 z-index: -1; 47 } 48 .container, .blue, .failure { 49 position: absolute; 50 top: 70px; 51 } 52 </style> 53 </head> 54 <body> 55 <p> 56 The test passes if the green rectangle on the right is completely between the two blue lines. 57 There should be no red. 58 </p> 59 <div id="test" class="container"> 60 <img id="image" src="support/left-half-rectangle.png"/> 61 X<br/>X 62 </div> 63 <div class="blue left-line"></div> 64 <div class="blue right-line"></div> 65 <div class="failure"></div> 66 </body> 67 </html>