gecko-dev/dom/canvas/test/imagebitmap_structuredclone_utils.js

var gImage1;
var gImage2;
var gImageBitmap1;
var gImageBitmap2;

// Bug 1239752.
var gImageData;
var gImageBitmap3;

function comparePixelColor(
  testImgageData,
  groundTruthImageData,
  x,
  y,
  tolerance,
  info
) {
  ok(
    testImgageData.width == groundTruthImageData.width &&
      testImgageData.height == groundTruthImageData.height,
    "testImgageData and groundTruthImageData should have the same dimension."
  );

  var index = (groundTruthImageData.width * y + x) * 4;
  var r = groundTruthImageData.data[index + 0];
  var g = groundTruthImageData.data[index + 1];
  var b = groundTruthImageData.data[index + 2];
  var a = groundTruthImageData.data[index + 3];
  var newR = testImgageData.data[index + 0];
  var newG = testImgageData.data[index + 1];
  var newB = testImgageData.data[index + 2];
  var newA = testImgageData.data[index + 3];
  var isTheSame =
    Math.abs(r - newR) <= tolerance &&
    Math.abs(g - newG) <= tolerance &&
    Math.abs(b - newB) <= tolerance &&
    Math.abs(a - newA) <= tolerance;
  ok(
    isTheSame,
    "[" +
      info +
      "] " +
      "newImageData(" +
      newR +
      "," +
      newG +
      "," +
      newB +
      "," +
      newA +
      ") should equal to imageData(" +
      r +
      "," +
      g +
      "," +
      b +
      "," +
      a +
      ")."
  );
}

function compareImageBitmapWithImageElement(imageBitmap, imageElement) {
  var canvas1 = document.createElement("canvas");
  var canvas2 = document.createElement("canvas");

  canvas1.width = imageElement.naturalWidth;
  canvas1.height = imageElement.naturalHeight;
  canvas2.width = imageElement.naturalWidth;
  canvas2.height = imageElement.naturalHeight;

  var ctx1 = canvas1.getContext("2d");
  var ctx2 = canvas2.getContext("2d");

  ctx1.drawImage(imageElement, 0, 0);
  ctx2.drawImage(imageBitmap, 0, 0);

  document.body.appendChild(canvas1);
  document.body.appendChild(canvas2);

  var imageData1 = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
  var imageData2 = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);

  // Create an array of pixels that is going to be tested.
  var pixels = [];
  var xGap = imageElement.naturalWidth / 4;
  var yGap = imageElement.naturalHeight / 4;
  for (var y = 0; y < imageElement.naturalHeight; y += yGap) {
    for (var x = 0; x < imageElement.naturalWidth; x += xGap) {
      pixels.push({ x, y });
    }
  }

  // Also, put the button-right pixel into pixels.
  pixels.push({
    x: imageElement.naturalWidth - 1,
    y: imageElement.naturalHeight - 1,
  });

  // Do the test.
  for (var pixel of pixels) {
    comparePixelColor(imageData2, imageData1, pixel.x, pixel.y, 0);
  }
}

function compareImageBitmapWithImageData(imageBitmap, imageData, info) {
  var canvas1 = document.createElement("canvas");

  canvas1.width = imageBitmap.width;
  canvas1.height = imageBitmap.height;

  var ctx1 = canvas1.getContext("2d");

  ctx1.drawImage(imageBitmap, 0, 0);

  document.body.appendChild(canvas1);

  var imageData1 = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);

  // Create an array of pixels that is going to be tested.
  var pixels = [];
  var xGap = imageBitmap.width / 4;
  var yGap = imageBitmap.height / 4;
  for (var y = 0; y < imageBitmap.height; y += yGap) {
    for (var x = 0; x < imageBitmap.width; x += xGap) {
      pixels.push({ x, y });
    }
  }

  // Also, put the button-right pixel into pixels.
  pixels.push({ x: imageBitmap.width - 1, y: imageBitmap.height - 1 });

  // Do the test.
  for (var pixel of pixels) {
    comparePixelColor(imageData1, imageData, pixel.x, pixel.y, 5, info);
  }
}

function prepareImageBitmaps() {
  gImage1 = document.createElement("img");
  gImage2 = document.createElement("img");
  gImage1.src = "image_rgrg-256x256.png";
  gImage2.src = "image_yellow.png";

  var p1 = new Promise(function(resolve, reject) {
    gImage1.onload = function() {
      var promise = createImageBitmap(gImage1);
      promise.then(function(bitmap) {
        gImageBitmap1 = bitmap;
        resolve(true);
      });
    };
  });

  var p2 = new Promise(function(resolve, reject) {
    gImage2.onload = function() {
      var promise = createImageBitmap(gImage2);
      promise.then(function(bitmap) {
        gImageBitmap2 = bitmap;
        resolve(true);
      });
    };
  });

  var p3 = new Promise(function(resolve, reject) {
    // Create an ImageData with random colors.
    var width = 5;
    var height = 10;
    var data = [
      43,
      143,
      24,
      148,
      235,
      165,
      179,
      91,
      74,
      228,
      75,
      195,
      141,
      109,
      74,
      65,
      25,
      177,
      3,
      201,
      128,
      105,
      12,
      199,
      196,
      93,
      241,
      131,
      250,
      121,
      232,
      189,
      175,
      131,
      216,
      190,
      145,
      123,
      167,
      70,
      18,
      196,
      210,
      162,
      225,
      1,
      90,
      188,
      223,
      216,
      182,
      233,
      118,
      50,
      168,
      56,
      51,
      206,
      198,
      199,
      153,
      29,
      70,
      130,
      180,
      135,
      135,
      51,
      148,
      46,
      44,
      144,
      80,
      171,
      142,
      95,
      25,
      178,
      102,
      110,
      0,
      28,
      128,
      91,
      31,
      222,
      42,
      170,
      85,
      8,
      218,
      146,
      65,
      30,
      198,
      238,
      121,
      57,
      124,
      88,
      246,
      40,
      141,
      146,
      174,
      195,
      255,
      149,
      30,
      153,
      92,
      116,
      18,
      241,
      6,
      111,
      39,
      162,
      85,
      143,
      237,
      159,
      201,
      244,
      93,
      68,
      14,
      246,
      143,
      143,
      83,
      221,
      187,
      215,
      243,
      154,
      24,
      125,
      221,
      53,
      80,
      153,
      151,
      219,
      202,
      241,
      250,
      191,
      153,
      129,
      181,
      57,
      94,
      18,
      136,
      231,
      41,
      252,
      168,
      207,
      213,
      103,
      118,
      172,
      53,
      213,
      184,
      204,
      25,
      29,
      249,
      199,
      101,
      55,
      49,
      167,
      25,
      23,
      173,
      78,
      19,
      234,
      205,
      155,
      250,
      175,
      44,
      201,
      215,
      92,
      25,
      59,
      25,
      29,
      249,
      199,
      153,
      129,
      181,
      57,
    ];

    gImageData = new ImageData(new Uint8ClampedArray(data), width, height);

    // Create an ImageBitmap from the above ImageData.
    createImageBitmap(gImageData).then(
      bitmap => {
        gImageBitmap3 = bitmap;
        resolve(true);
      },
      () => {
        reject();
      }
    );
  });

  return Promise.all([p1, p2, p3]);
}