dom/canvas/test/imagebitmap_structuredclone_utils.js

   1 var gImage1;
   2 var gImage2;
   3 var gImageBitmap1;
   4 var gImageBitmap2;
   5
   6 // Bug 1239752.
   7 var gImageData;
   8 var gImageBitmap3;
   9
  10 function comparePixelColor(
  11   testImgageData,
  12   groundTruthImageData,
  13   x,
  14   y,
  15   tolerance,
  16   info
  17 ) {
  18   ok(
  19     testImgageData.width == groundTruthImageData.width &&
  20       testImgageData.height == groundTruthImageData.height,
  21     "testImgageData and groundTruthImageData should have the same dimension."
  22   );
  23
  24   var index = (groundTruthImageData.width * y + x) * 4;
  25   var r = groundTruthImageData.data[index + 0];
  26   var g = groundTruthImageData.data[index + 1];
  27   var b = groundTruthImageData.data[index + 2];
  28   var a = groundTruthImageData.data[index + 3];
  29   var newR = testImgageData.data[index + 0];
  30   var newG = testImgageData.data[index + 1];
  31   var newB = testImgageData.data[index + 2];
  32   var newA = testImgageData.data[index + 3];
  33   var isTheSame =
  34     Math.abs(r - newR) <= tolerance &&
  35     Math.abs(g - newG) <= tolerance &&
  36     Math.abs(b - newB) <= tolerance &&
  37     Math.abs(a - newA) <= tolerance;
  38   ok(
  39     isTheSame,
  40     "[" +
  41       info +
  42       "] " +
  43       "newImageData(" +
  44       newR +
  45       "," +
  46       newG +
  47       "," +
  48       newB +
  49       "," +
  50       newA +
  51       ") should equal to imageData(" +
  52       r +
  53       "," +
  54       g +
  55       "," +
  56       b +
  57       "," +
  58       a +
  59       ")."
  60   );
  61 }
  62
  63 function compareImageBitmapWithImageElement(imageBitmap, imageElement) {
  64   var canvas1 = document.createElement("canvas");
  65   var canvas2 = document.createElement("canvas");
  66
  67   canvas1.width = imageElement.naturalWidth;
  68   canvas1.height = imageElement.naturalHeight;
  69   canvas2.width = imageElement.naturalWidth;
  70   canvas2.height = imageElement.naturalHeight;
  71
  72   var ctx1 = canvas1.getContext("2d");
  73   var ctx2 = canvas2.getContext("2d");
  74
  75   ctx1.drawImage(imageElement, 0, 0);
  76   ctx2.drawImage(imageBitmap, 0, 0);
  77
  78   document.body.appendChild(canvas1);
  79   document.body.appendChild(canvas2);
  80
  81   var imageData1 = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
  82   var imageData2 = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);
  83
  84   // Create an array of pixels that is going to be tested.
  85   var pixels = [];
  86   var xGap = imageElement.naturalWidth / 4;
  87   var yGap = imageElement.naturalHeight / 4;
  88   for (var y = 0; y < imageElement.naturalHeight; y += yGap) {
  89     for (var x = 0; x < imageElement.naturalWidth; x += xGap) {
  90       pixels.push({ x, y });
  91     }
  92   }
  93
  94   // Also, put the button-right pixel into pixels.
  95   pixels.push({
  96     x: imageElement.naturalWidth - 1,
  97     y: imageElement.naturalHeight - 1,
  98   });
  99
 100   // Do the test.
 101   for (var pixel of pixels) {
 102     comparePixelColor(imageData2, imageData1, pixel.x, pixel.y, 0);
 103   }
 104 }
 105
 106 function compareImageBitmapWithImageData(imageBitmap, imageData, info) {
 107   var canvas1 = document.createElement("canvas");
 108
 109   canvas1.width = imageBitmap.width;
 110   canvas1.height = imageBitmap.height;
 111
 112   var ctx1 = canvas1.getContext("2d");
 113
 114   ctx1.drawImage(imageBitmap, 0, 0);
 115
 116   document.body.appendChild(canvas1);
 117
 118   var imageData1 = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
 119
 120   // Create an array of pixels that is going to be tested.
 121   var pixels = [];
 122   var xGap = imageBitmap.width / 4;
 123   var yGap = imageBitmap.height / 4;
 124   for (var y = 0; y < imageBitmap.height; y += yGap) {
 125     for (var x = 0; x < imageBitmap.width; x += xGap) {
 126       pixels.push({ x, y });
 127     }
 128   }
 129
 130   // Also, put the button-right pixel into pixels.
 131   pixels.push({ x: imageBitmap.width - 1, y: imageBitmap.height - 1 });
 132
 133   // Do the test.
 134   for (var pixel of pixels) {
 135     comparePixelColor(imageData1, imageData, pixel.x, pixel.y, 5, info);
 136   }
 137 }
 138
 139 function prepareImageBitmaps() {
 140   gImage1 = document.createElement("img");
 141   gImage2 = document.createElement("img");
 142   gImage1.src = "image_rgrg-256x256.png";
 143   gImage2.src = "image_yellow.png";
 144
 145   var p1 = new Promise(function (resolve, reject) {
 146     gImage1.onload = function () {
 147       var promise = createImageBitmap(gImage1);
 148       promise.then(function (bitmap) {
 149         gImageBitmap1 = bitmap;
 150         resolve(true);
 151       });
 152     };
 153   });
 154
 155   var p2 = new Promise(function (resolve, reject) {
 156     gImage2.onload = function () {
 157       var promise = createImageBitmap(gImage2);
 158       promise.then(function (bitmap) {
 159         gImageBitmap2 = bitmap;
 160         resolve(true);
 161       });
 162     };
 163   });
 164
 165   var p3 = new Promise(function (resolve, reject) {
 166     // Create an ImageData with random colors.
 167     var width = 5;
 168     var height = 10;
 169     var data = [
 170       43, 143, 24, 148, 235, 165, 179, 91, 74, 228, 75, 195, 141, 109, 74, 65,
 171       25, 177, 3, 201, 128, 105, 12, 199, 196, 93, 241, 131, 250, 121, 232, 189,
 172       175, 131, 216, 190, 145, 123, 167, 70, 18, 196, 210, 162, 225, 1, 90, 188,
 173       223, 216, 182, 233, 118, 50, 168, 56, 51, 206, 198, 199, 153, 29, 70, 130,
 174       180, 135, 135, 51, 148, 46, 44, 144, 80, 171, 142, 95, 25, 178, 102, 110,
 175       0, 28, 128, 91, 31, 222, 42, 170, 85, 8, 218, 146, 65, 30, 198, 238, 121,
 176       57, 124, 88, 246, 40, 141, 146, 174, 195, 255, 149, 30, 153, 92, 116, 18,
 177       241, 6, 111, 39, 162, 85, 143, 237, 159, 201, 244, 93, 68, 14, 246, 143,
 178       143, 83, 221, 187, 215, 243, 154, 24, 125, 221, 53, 80, 153, 151, 219,
 179       202, 241, 250, 191, 153, 129, 181, 57, 94, 18, 136, 231, 41, 252, 168,
 180       207, 213, 103, 118, 172, 53, 213, 184, 204, 25, 29, 249, 199, 101, 55, 49,
 181       167, 25, 23, 173, 78, 19, 234, 205, 155, 250, 175, 44, 201, 215, 92, 25,
 182       59, 25, 29, 249, 199, 153, 129, 181, 57,
 183     ];
 184
 185     gImageData = new ImageData(new Uint8ClampedArray(data), width, height);
 186
 187     // Create an ImageBitmap from the above ImageData.
 188     createImageBitmap(gImageData).then(
 189       bitmap => {
 190         gImageBitmap3 = bitmap;
 191         resolve(true);
 192       },
 193       () => {
 194         reject();
 195       }
 196     );
 197   });
 198
 199   return Promise.all([p1, p2, p3]);
 200 }