<!DOCTYPE html>
<html>
<head>
  <script src="../resources/js-test-pre.js"></script>
</head>
<body>
  <canvas id="sourceCanvas" width="100" height="100"></canvas>
  <canvas id="dataURLSynchronousCanvas" width="100" height="100"></canvas>
  <canvas id="dataURLAsynchronousCanvas" width="100" height="100"></canvas>
  <canvas id="sameDomainSynchronousCanvas" width="100" height="100"></canvas>
  <canvas id="sameDomainAsynchronousCanvas" width="100" height="100"></canvas>
  <canvas id="crossDomainSynchronousCanvas" width="100" height="100"></canvas>
  <canvas id="crossDomainAsynchronousCanvas" width="100" height="100"></canvas>
  <script>
    function drawCanvasBackground(id, color) {
      var canvas = document.getElementById(id);
      var context = canvas.getContext("2d");
      context.fillStyle = color;
      context.fillRect(0, 0, 100, 100);
      return context;
    }
    
    function incrementLoadedImagesCount() {
      if (typeof incrementLoadedImagesCount.counter == 'undefined')
        incrementLoadedImagesCount.counter = 0;
        
      if (++incrementLoadedImagesCount.counter == 4)
          finishJSTest();
    }

    function drawAndGetImageDataSynchronous(id, imageSrc, shouldTaint) {
      var context = drawCanvasBackground(id, '#f00'); // red
      var image =  new Image();
      image.src = imageSrc;
      context.drawImage(image, 0, 0);

      try {
        var pixels = new Uint32Array(context.getImageData(0, 0, 1, 1).data.buffer);
        if (pixels[0] == 0xFF0000FF)
          debug(shouldTaint ? "Tainting works correctly." : "Tainting works incorrectly.");
        else
          debug(shouldTaint ? "Tainting works incorrectly." : "Tainting works correctly.");
      }
      catch (error) {
        debug(shouldTaint ? "Tainting works correctly." : "Tainting works incorrectly.");
      }
      
      incrementLoadedImagesCount();
    }
    
    function drawAndGetImageDataAsynchronous(canvasId, imageSrc, shouldTaint) {
      var context = drawCanvasBackground(canvasId, '#f00'); // red
      var image =  new Image();

      image.onload = function() {
        context.drawImage(image, 0, 0);
        try {
          var pixels = new Uint32Array(context.getImageData(0, 0, 1, 1).data.buffer);
          debug(shouldTaint ? "Tainting works incorrectly." : "Tainting works correctly.");
        }
        catch (error) {
          debug(shouldTaint ? "Tainting works correctly." : "Tainting works incorrectly.");
        }

        incrementLoadedImagesCount();
      }
      image.src = imageSrc;
    }

    window.jsTestIsAsync = true;
    
    drawCanvasBackground("sourceCanvas", '#0f0'); // green
    
    // The dataURL and same-domain images should not be tainted. We should always be
    // able to get the image data regardless whether it is drawn or not. But because
    // we ask for the image data right after we load the image, we do not know the
    // pixels values. So the synchronous case can't be tested.
    drawAndGetImageDataAsynchronous("dataURLAsynchronousCanvas", sourceCanvas.toDataURL(), false);
    drawAndGetImageDataAsynchronous("sameDomainAsynchronousCanvas", "http://127.0.0.1:8000/canvas/resources/100x100-lime-rect.svg", false);
    
    // Cross domain image load should taint the canvas. The image should not be drawn
    // so the synchronous case can be tested since we know the canvas pixel value.
    drawAndGetImageDataSynchronous("crossDomainSynchronousCanvas", "http://localhost:8000/canvas/resources/100x100-lime-rect.svg", true);
    drawAndGetImageDataAsynchronous("crossDomainAsynchronousCanvas", "http://localhost:8000/canvas/resources/100x100-lime-rect.svg", true);
  </script>
  <script src="../resources/js-test-post.js"></script>
</body>
</html>