<!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>