<!DOCTYPE html> <html><head> <title>CSS Test: right float, url(svg), data uri + shape-image-threshold + shape-margin (%)</title> <link href="hmuller@adobe.com" rel="author" title="Hans Muller"> <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="reference/shape-image-023-ref.htm" rel="match"> <meta content="ahem" name="flags"> <meta content="This test verifies the boundary of a shape-outside defined by an SVG URI, shape-image-threshold, and a shape-margin." name="assert"> <style type="text/css"> #container { position: relative; width: 200px; font-family: Ahem; font-size: 40px; text-align: right; color: green; } #image { float: right; margin-left: 100px; margin-top: 10px; margin-bottom: 100px; shape-outside: url("data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='rgba(0,0,255, 0.5)'/></svg>"); shape-image-threshold: 0.4; shape-margin: 5%; } #failure { position: absolute; top: 0px; left: 130px; /* container.width - shape-outside+margin.width - font-size */ width: 200px; text-align: left; color: red; z-index: -1; } </style> </head> <body> <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p> <div id="container"> <img src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='rgb(0,0,255)'/></svg>" id="image"> X<br>X <div id="failure"> X<br><span style="margin-left: 30px">X</span> </div> </div> </body></html>