<!DOCTYPE html> <html> <head> <title>CSS Test: Image shape on a right float</title> <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.com"/> <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> <link rel="match" href="reference/shape-image-013-ref.html"/> <meta name="flags" content="ahem image"/> <meta name="assert" content="This test verifies that a shape specified as a png image with 70% alpha and 0.71 shape-image-threshold creates a proper shape."/> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style type="text/css"> .container { position: relative; font-family: Ahem; font-size: 50px; line-height: 50px; } #test { width: 100px; color: rgb(0, 100, 0); background-color: red; } #image { float: right; shape-outside: url(support/right-half-rectangle-70.png); shape-image-threshold: 0.71; } </style> </head> <body> <p> The test passes if you see a solid green square. There should be no red. </p> <div id="test" class="container"> <img id="image" src="support/right-half-rectangle-70.png"/> X X </div> </body> </html>