<!DOCTYPE html>
<html>
<head>
  <style>
  body {
    background-color:blue;
  }

  #box {
    width:100px;
    height:100px;
    border:1px solid;
  }
  </style>
  <script>
    if (window.testRunner) {
      testRunner.dumpAsText(true);
      testRunner.waitUntilDone();
    }
    function doTest()
    {
      var c = document.getElementById("box");
      var ctx = c.getContext("2d");

      var imgData = ctx.createImageData(100, 100);
      for (var i = 0; i < imgData.data.length ; i += 4) {
        imgData.data[i + 0] = 255;
        imgData.data[i + 1] = 0;
        imgData.data[i + 2] = 0;
        imgData.data[i + 3] = 0;
      }
      ctx.putImageData(imgData, 0, 0);
      if (window.testRunner)
        testRunner.notifyDone();
    }
    window.addEventListener('load', doTest, false);
  </script>
</head>
<body>
  <canvas id="box" width="100" height="100">
  </canvas>
</body>
</html>