<html>
  <body>
    <canvas id="canvas" width="100" height="100"></canvas>
  </body>
  <script type="text/javascript">
    function go() {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      // Draw some orange
      ctx.fillStyle = "orange";
      ctx.fillRect(0, 0, 100, 100);

      // Instantiate an image. Once it has loaded, draw it & take snapshot.
      var image = new Image();
      image.onload = function() {
        // Note that our canvas is 100x100, so our scaled 200x200 image will
        // get cropped to 100x100.
        ctx.scale(2, 2);  // Scale our image-drawing by 2
        ctx.drawImage(image, 0, 0);
        document.documentElement.removeAttribute("class");

        if (window.testRunner)
          testRunner.notifyDone();
      }
      image.src ="resources/lime100x100.svg";
    }
    if (window.testRunner)
       testRunner.waitUntilDone();
     
    setTimeout(go, 100);
  </script>
</html>