<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS Test: left float, url(png), real image + shape-margin (px)</title> <link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" /> <link href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image" rel="help" /> <link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" /> <link href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property" rel="help" /> <link href="reference/shape-image-006-ref.xht" rel="match" /> <meta content="ahem" name="flags" /> <meta content="This test verifies that content wraps around all the image pixels + the shape-margin when shape-outside is given a png file." name="assert" /> <style type="text/css"> body { margin: 0; } .container { left: 10px; font: 50px/1 Ahem; } #test { width: 200px; color: rgb(0,100,0); } #image { float: left; shape-outside: url("support/left-half-rectangle.png"); shape-margin: 10px; } .blue { width: 2px; height: 100px; background-color: blue; } .left-line { left: 65px; } .right-line { left: 125px; } .failure { left: 70px; width: 50px; height: 100px; background-color: red; z-index: -1; } .container, .blue, .failure { position: absolute; top: 70px; } </style> </head> <body> <p> The test passes if the green rectangle on the right is completely between the two blue lines. There should be no red. </p> <div class="container" id="test"> <img src="support/left-half-rectangle.png" id="image" /> X<br />X </div> <div class="blue left-line"></div> <div class="blue right-line"></div> <div class="failure"></div> </body></html>