tor-browser

imagebitmap_structuredclone_utils.js (5846B)

---

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]);
}