diff options
Diffstat (limited to '')
| -rw-r--r-- | dom/canvas/test/imagebitmap_structuredclone_utils.js | 387 |
1 files changed, 387 insertions, 0 deletions
diff --git a/dom/canvas/test/imagebitmap_structuredclone_utils.js b/dom/canvas/test/imagebitmap_structuredclone_utils.js new file mode 100644 index 0000000000..b138eeee80 --- /dev/null +++ b/dom/canvas/test/imagebitmap_structuredclone_utils.js @@ -0,0 +1,387 @@ +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]); +} |