<!DOCTYPE HTML>
<title>Test ImageBitmap Cropping (Bug 1190210)</title>
<meta charset="utf-8">
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
<body>
<script type="text/javascript">

SimpleTest.waitForExplicitFinish();

/**
 * [isPixel description]
 * @param  {[type]}  ctx : canvas context
 * @param  {[type]}  x   : pixel x coordinate
 * @param  {[type]}  y   : pixel y coordinate
 * @param  {[type]}  c   : a rgba color code
 * @param  {[type]}  d   : error duration
 * @return {Promise}
 */
function isPixel(ctx, x, y, c, d) {
  var pos = x + "," + y;
  var color = c[0] + "," + c[1] + "," + c[2] + "," + c[3];
  var pixel = ctx.getImageData(x, y, 1, 1);
  var pr = pixel.data[0],
      pg = pixel.data[1],
      pb = pixel.data[2],
      pa = pixel.data[3];
  ok(c[0]-d <= pr && pr <= c[0]+d &&
     c[1]-d <= pg && pg <= c[1]+d &&
     c[2]-d <= pb && pb <= c[2]+d &&
     c[3]-d <= pa && pa <= c[3]+d,
     "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+"; expected "+color+" +/- "+d);
}

//
//  The pattern of the 320x240.ogv video.
//  .------------------------------------------------.
//  | 255  | 255  | 0    | 0    | 255  | 255  | 0    |
//  | 255  | 255  | 255  | 255  | 0    | 0    | 0    |
//  | 255  | 0    | 255  | 0    | 255  | 0    | 255  |
//  |      |      |      |      |      |      |      |
//  ^      ^      ^      ^      ^      ^      ^      ^
//  0      46     92     138    184    230    276    319
//
//
// TEST_BITMAPS is a collection of test cases.
// Each object in the TEST_BITMAPS array is a test case with the following
// properties:
// 1) croppingArea: indicating the cropping area in format (x, y, width, height).
// 2) testedPixels: an array of pixels that is going to be checked.
//    Each item in the testedPixels array contains:
//    2.1) "pixel": the coordinate of this pixel (x, y).
//    2.2) "expectedColor": the expected color of this pixel (r, g, b, a).
//    2.3) "tolerance": the acceptable tolerance of pixel values.
//
var TEST_BITMAPS = [
  // Cropping area is exactly the same as source surface.
  {'croppingArea': [0,    0,    320, 240],
   'testedPixels': [{"pixel": [0,    0], "expectedColor": [255, 255, 255, 255], "tolerance": 5},
                    {"pixel": [50,   0], "expectedColor": [255, 255, 0,   255], "tolerance": 5}]},
  // Cropping area completely covers the source surface.
  {'croppingArea': [-100, -100, 520, 440],
   'testedPixels': [{"pixel": [0,    0],   "expectedColor": [0,   0,   0,   0], "tolerance": 5},
                    {"pixel": [519,  0],   "expectedColor": [0,   0,   0,   0], "tolerance": 5},
                    {"pixel": [0,    439], "expectedColor": [0,   0,   0,   0], "tolerance": 5},
                    {"pixel": [519,  439], "expectedColor": [0,   0,   0,   0], "tolerance": 5},
                    {"pixel": [100,  100], "expectedColor": [255, 255, 255, 255], "tolerance": 5},
                    {"pixel": [150,  120], "expectedColor": [255, 255, 0,   255], "tolerance": 5},
                    {"pixel": [200,  140], "expectedColor": [0,   255, 255, 255], "tolerance": 5}]},
  // Cropping area partially covers the left-upper part of the source surface.
  {'croppingArea': [-100, -100, 320, 240],
   'testedPixels': [{"pixel": [0,    0],   "expectedColor": [0,   0,   0,   0  ], "tolerance": 5},
                    {"pixel": [100,  100], "expectedColor": [255, 255, 255, 255], "tolerance": 5},
                    {"pixel": [150,  100], "expectedColor": [255, 255, 0,   255], "tolerance": 5}]},
  // Cropping area partially covers the middle-upper part of the source surface.
  {'croppingArea': [ 100, -100, 220, 240],
   'testedPixels': [{"pixel": [0,    0],   "expectedColor": [0,   0,   0,   0  ], "tolerance": 5},
                    {"pixel": [0,    100], "expectedColor": [0,   255, 255, 255], "tolerance": 5},
                    {"pixel": [150,  100], "expectedColor": [255, 0,   0,   255], "tolerance": 5}]},
  // Cropping area partially covers the right-upper part of the source surface.
  {'croppingArea': [ 200, -100, 320, 240],
   'testedPixels': [{"pixel": [0,    0],   "expectedColor": [0,   0,   0,   0  ], "tolerance": 5},
                    {"pixel": [0,    100], "expectedColor": [255, 0,   255, 255], "tolerance": 5},
                    {"pixel": [100,  100], "expectedColor": [0,   0,   255, 255], "tolerance": 5}]},
  // Cropping area partially covers the left-center part of the source surface.
  {'croppingArea': [-100,  100, 320, 120],
   'testedPixels': [{"pixel": [0,    0],   "expectedColor": [0,   0,   0,   0  ], "tolerance": 5},
                    {"pixel": [200,  0],   "expectedColor": [0,   255, 255, 255], "tolerance": 5},
                    {"pixel": [250,  10],  "expectedColor": [0,   255, 0,   255], "tolerance": 5}]},
  // Cropping area partially covers the left-bottom part of the source surface.
  {'croppingArea': [-100,  200, 320, 240],
   'testedPixels': [{"pixel": [0,    0],   "expectedColor": [0,   0,   0,   0  ], "tolerance": 5},
                    {"pixel": [100,  0],   "expectedColor": [0,   60,  136, 255], "tolerance": 5},
                    {"pixel": [180,  10],  "expectedColor": [255, 255, 255, 255], "tolerance": 5}]},
  // Cropping area partially covers the middle-bottom part of the source surface.
  {'croppingArea': [  40,  200, 200, 100],
   'testedPixels': [{"pixel": [0,    0],   "expectedColor": [0,   60,  136, 255], "tolerance": 5},
                    {"pixel": [100,  20],  "expectedColor": [107, 0,   210, 255], "tolerance": 5},
                    {"pixel": [80,   150], "expectedColor": [0,   0,   0,   0  ], "tolerance": 5}]},
  // Cropping area partially covers the right-bottom part of the source surface.
  {'croppingArea': [ 160,  100, 300, 300],
   'testedPixels': [{"pixel": [0,    0],   "expectedColor": [0,   255, 0,   255], "tolerance": 5},
                    {"pixel": [120,  20],  "expectedColor": [0,   0,   255, 255], "tolerance": 5},
                    {"pixel": [299,  299], "expectedColor": [0,   0,   0,   0  ], "tolerance": 5}]},
  // Cropping area is completely outside the source surface. (upper-left)
  {'croppingArea': [-500, -500,  20,  20],
   'testedPixels': [{"pixel": [0,    0],   "expectedColor": [0,   0,   0,   0], "tolerance": 5},
                    {"pixel": [19,   19],  "expectedColor": [0,   0,   0,   0], "tolerance": 5}]},
  // Cropping area is completely outside the source surface. (upper-right)
  {'croppingArea': [ 500, -500,  20,  20],
   'testedPixels': [{"pixel": [0,    0],   "expectedColor": [0,   0,   0,   0], "tolerance": 5},
                    {"pixel": [19,   19],  "expectedColor": [0,   0,   0,   0], "tolerance": 5}]},
  // Cropping area is completely outside the source surface. (bottom-left)
  {'croppingArea': [-200,  500,  20,  20],
   'testedPixels': [{"pixel": [0,    0],   "expectedColor": [0,   0,   0,   0], "tolerance": 5},
                    {"pixel": [19,   19],  "expectedColor": [0,   0,   0,   0], "tolerance": 5}]},
  // Cropping area is completely outside the source surface. (bottom-right)
  {'croppingArea': [ 500,  200,  20,  20],
   'testedPixels': [{"pixel": [0,    0],   "expectedColor": [0,   0,   0,   0], "tolerance": 5},
                    {"pixel": [19,   19],  "expectedColor": [0,   0,   0,   0], "tolerance": 5}]},
];

function failed(ex) {
  ok(false, "Promise failure: " + ex);
}

var gImage;
var gVideo;
var gCanvas;
var gCtx;
var gImageData;
var gImageBitmap;
var gPNGBlob;
var gJPEGBlob;

function prepareSources() {
  gVideo = document.createElement("video");
  gVideo.src = "http://example.com/tests/dom/canvas/test/crossorigin/video.sjs?name=tests/dom/canvas/test/320x240.ogv&type=video/ogg&cors=anonymous";
  gVideo.crossOrigin = "anonymous";
  gVideo.autoplay = "true"


  gCanvas = document.createElement("canvas");
  gCtx = gCanvas.getContext("2d");

  var resolver;
  var promise = new Promise(function(resolve, reject) {
    resolver = resolve;
  });

  // Prepare video.
  gVideo.onloadeddata = function() {
    ok(gVideo, "[Prepare Sources] gVideo is ok.");

    // Prepare canvas.
    gCanvas.width = gVideo.videoWidth;
    gCanvas.height = gVideo.videoHeight;
    gCtx.drawImage(gVideo, 0, 0);
    ok(gCanvas, "[Prepare Sources] gCanvas is ok.");
    ok(gCtx, "[Prepare Sources] gCtx is ok.");

    // Prepare image.
    gImage = document.createElement("img");
    gImage.src = gCanvas.toDataURL();
    var resolverImage;
    var promiseImage = new Promise(function(resolve, reject) {
      resolverImage = resolve;
    });
    gImage.onload = function() {
      resolverImage(true);
    }

    // Prepare ImageData.
    gImageData = gCtx.getImageData(0, 0, gCanvas.width, gCanvas.height);
    ok(gImageData, "[Prepare Sources] gImageData is ok.");

    // Prepapre PNG Blob.
    var promisePNGBlob = new Promise(function(resolve, reject) {
      gCanvas.toBlob(function(blob) {
        gPNGBlob = blob;
        ok(gPNGBlob, "[Prepare Sources] gPNGBlob is ok.");
        resolve(true);
      });
    });

    // Prepare JPEG Blob.
    var promiseJPEGBlob = new Promise(function(resolve, reject) {
      gCanvas.toBlob(function(blob) {
        gJPEGBlob = blob;
        ok(gJPEGBlob, "[Prepare Sources] gJPEGBlob is ok.");
        resolve(true);
      }, "image/jpeg", 0.95);
    });

    // Prepare ImageBitmap.
    var promiseImageBitmap = new Promise(function(resolve, reject) {
      var p = createImageBitmap(gVideo);
      p.then(function(bitmap) {
        gImageBitmap = bitmap;
        ok(gImageBitmap, "[Prepare Sources] gImageBitmap is ok.");
        resolve(true);
      });
    });

    resolver(Promise.all([
      promiseImage,
      promisePNGBlob,
      promiseJPEGBlob,
      promiseImageBitmap
    ]))
  }

  return promise;
}

function testCropping_randomTest(source) {
  var canvasSrouce = document.createElement("canvas");
  var ctxSource = canvasSrouce.getContext("2d");

  var p = createImageBitmap(source);
  p.then(function(bitmap) {
    canvasSrouce.width = bitmap.width;
    canvasSrouce.height = bitmap.height;
  });
}

function testCropping(source) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  document.body.appendChild(canvas);

  function createBitmap(def) {
    return createImageBitmap(source, def.croppingArea[0], def.croppingArea[1], def.croppingArea[2], def.croppingArea[3])
      .then(function (bitmap) { def.bitmap = bitmap; }, failed);
  };

  var promise = new Promise(function(resolve, reject) {
    resolve(Promise.all(TEST_BITMAPS.map(createBitmap)))
  });

  function testPixel(testedPixel) {
    isPixel(ctx, testedPixel.pixel[0], testedPixel.pixel[1], testedPixel.expectedColor, testedPixel.tolerance);
  };

  return promise.then(function() {
    TEST_BITMAPS.forEach(function (testCase) {
      if (!testCase.bitmap) { return; }
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      canvas.width = testCase.bitmap.width;
      canvas.height = testCase.bitmap.height;
      ctx.drawImage(testCase.bitmap, 0, 0);
      testCase.testedPixels.forEach(testPixel);
    });
  });
}

function runTests() {

  prepareSources().
    then( function() { return Promise.all([testCropping(gImage),
                                           testCropping(gVideo),
                                           testCropping(gCanvas),
                                           testCropping(gCtx),
                                           testCropping(gImageData),
                                           testCropping(gImageBitmap),
                                           testCropping(gPNGBlob),
                                           testCropping(gJPEGBlob)]); }).
    then(SimpleTest.finish, function(ev) { failed(ev); SimpleTest.finish(); });
}

addLoadEvent(runTests);

</script>
</body>
