shape-image-020-ref.html (1018B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Reference File</title> 5 <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style type="text/css"> 8 #container { 9 position: relative; 10 width: 200px; 11 font-family: Ahem; 12 font-size: 40px; 13 text-align: right; 14 color: green; 15 } 16 #image { 17 float: right; 18 margin-left: 10px; 19 margin-top: 10px; 20 margin-bottom: 10px; 21 } 22 </style> 23 </head> 24 <body> 25 <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> 26 <div id="container"> 27 <img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>"/> 28 X<br>X 29 </div> 30 </body> 31 </html>