<!DOCTYPE html> <html> <head> <title>Image tests</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="#" type="text/css" rel="stylesheet"> <script type="text/javascript" src="test.js"></script> <script type="text/javascript"> function setUp() { if ($('#testcanvas')[0].getContext) { var ctx = $('#testcanvas')[0].getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } else { $('#testcanvas').remove(); } }; </script> <style> .small{ font-size:14px; } .medium{ font-size:18px; } .large{ font-size:24px; } div{ float:left; } h2 { clear:both; } </style> </head> <body> <img src="image.jpg" /> <img src="image.jpg" style="width:50px;height:400px;" /> <img src="image.jpg" style="width:500px;" /> <img src="image.jpg" style="width:500px;height:40px;" /> <img src="image.jpg" style="padding:20px;border:5px solid black;" /> <img src="image.jpg" style="padding-bottom:20px;border-top:5px solid black;clear:both;" /> <img src="image.jpg" style="padding-top:20px;border-top:5px solid black;clear:both;width:50px;" /> <img src="image.jpg" style="padding-top:20px;border-top:5px solid black;clear:both;width:50px;height:25px;" /> <img src="image.jpg" style="width:0px;height:0px;border:1px solid black" /> <img src="image.jpg" style="width:0px;height:0px;" /> <canvas id="testcanvas" style="width:100px;height:100px;"></canvas> <br /> Image without src attribute, should not crash: <img style="width:50px;height:50px;border:1px solid red;display:block;" /> SVG taints image:<br /> <!-- http://fi.wikipedia.org/wiki/Tiedosto:Svg.svg --> <img src="image.svg" /> </body> </html>