| <!DOCTYPE HTML> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script> |
| |
| var srgbPixels = |
| [[155,27,27,128, "srgbRed"], [27,155,27,128, "srgbGreen"], |
| [27,27,155,128, "srgbBlue"], [27,27,27,128, "srgbBlack"]]; |
| |
| var e_srgbPixels = |
| [[0.607422, 0.121521, 0.121521, 0.501953, "e_sRgbRed"], |
| [0.121521, 0.607422, 0.121521, 0.501953, "e_sRgbGreen"], |
| [0.121521, 0.121521, 0.607422, 0.501953, "e_sRgbBlue"], |
| [0.121521, 0.121521, 0.121521, 0.501953, "e_sRgbBlack"]]; |
| |
| var xWidth = xHeight = 2; |
| var colorCorrectionToleranceSRGB = 1; |
| // The error level in SRGB->WCG_U8->SRGB is higher than normal color correction |
| // operations as the pixels are clipped in WCG when U8 storage is used instead |
| // of F16 storage. |
| var colorCorrectionToleranceWCG_U8toSRGB_U8 = 6; |
| var colorCorrectionToleranceWCG = 0.02; |
| |
| function testBlankPixels(actualData, width, height) |
| { |
| var message = "This pixel should be transparent black"; |
| var blankData = new Array(4 * width * height).fill(0); |
| assert_array_equals(actualData, blankData, message); |
| } |
| |
| function testPixels(actualData, expectedPixels, tolerance) |
| { |
| assert_equals(actualData.length, 4 * xWidth * xHeight); |
| for (var i = 0; i < xWidth * xHeight; i++) { |
| var message = "This pixel should be " + expectedPixels[i][4]; |
| for (var j = 0; j < 4; j++) |
| assert_approx_equals(actualData[i*4+j], expectedPixels[i][j], tolerance, |
| message); |
| } |
| } |
| |
| function checkImageDataColorSettings(canvasColorSettings, imageData) { |
| var imageDataColorSettings = imageData.getColorSettings(); |
| assert_equals(canvasColorSettings.colorSpace, |
| imageDataColorSettings.colorSpace); |
| if (canvasColorSettings.pixelFormat == "uint8") |
| assert_equals("uint8", imageDataColorSettings.storageFormat); |
| else |
| assert_equals("float32", imageDataColorSettings.storageFormat); |
| } |
| |
| function checkImageDataColorValues(canvasColorSettings, imageData, isBlank = '', |
| width = xWidth, height = xHeight, isWCG_U8toSRGB_U8 = '') { |
| var data = imageData.dataUnion; |
| if (isBlank === 'isBlank') { |
| testBlankPixels(data, width, height); |
| } else { |
| var expectedPixels = srgbPixels; |
| var tolerance = colorCorrectionToleranceSRGB; |
| if (isWCG_U8toSRGB_U8 === 'isWCG_U8toSRGB_U8') |
| tolerance = colorCorrectionToleranceWCG_U8toSRGB_U8; |
| if (canvasColorSettings.pixelFormat != "uint8") { |
| expectedPixels = e_srgbPixels; |
| tolerance = colorCorrectionToleranceWCG; |
| } |
| testPixels(data, expectedPixels, tolerance); |
| } |
| } |
| |
| function initializeColorManagedCanvas(canvasColorSettings) |
| { |
| var canvas = document.createElement('canvas'); |
| canvas.width = xWidth; |
| canvas.height = xHeight; |
| var ctx = canvas.getContext('2d', |
| {colorSpace: canvasColorSettings.colorSpace, |
| pixelFormat: canvasColorSettings.pixelFormat}); |
| ctx.fillStyle = "rgba(155, 27, 27, 0.5)"; |
| ctx.fillRect(0, 0, xWidth/2, xHeight/2); |
| ctx.fillStyle = "rgba(27, 155, 27, 0.5)"; |
| ctx.fillRect(xWidth/2, 0, xWidth/2, xHeight/2); |
| ctx.fillStyle = "rgba(27, 27, 155, 0.5)"; |
| ctx.fillRect(0, xHeight/2, xWidth/2, xHeight/2); |
| ctx.fillStyle = "rgba(27, 27, 27, 0.5)"; |
| ctx.fillRect(xWidth/2, xHeight/2, xWidth/2, xHeight/2); |
| return canvas; |
| } |
| |
| var canvasColorSettingsSet = [ |
| {name: "SRGB", colorSettings: {colorSpace: "srgb", pixelFormat: "uint8"}}, |
| {name: "e-SRGB", colorSettings: {colorSpace: "srgb", pixelFormat: "float16"}}, |
| ]; |
| |
| var srgbImageDataU8, e_srgbImageDataU16, e_srgbImageDataF32; |
| |
| function PreparePredefinedImageDataObjects() { |
| var canvas = document.createElement('canvas'); |
| var ctx = canvas.getContext('2d'); |
| srgbImageDataU8 = ctx.createImageData(xWidth, xHeight, |
| {colorSpace: "srgb", storageFormat: "uint8"}); |
| e_srgbImageDataU16 = ctx.createImageData(xWidth, xHeight, |
| {colorSpace: "srgb", storageFormat: "uint16"}); |
| e_srgbImageDataF32 = ctx.createImageData(xWidth, xHeight, |
| {colorSpace: "srgb", storageFormat: "float32"}); |
| |
| for (var i = 0; i < xWidth * xHeight; i++) |
| for (var j = 0; j < 4; j++) { |
| srgbImageDataU8.dataUnion[i*4+j] = srgbPixels[i][j]; |
| e_srgbImageDataU16.dataUnion[i*4+j] = |
| Math.round(e_srgbPixels[i][j] * 65535); |
| e_srgbImageDataF32.dataUnion[i*4+j] = e_srgbPixels[i][j]; |
| } |
| } |
| |
| PreparePredefinedImageDataObjects(); |
| var imageDataColorSettingsSet = [ |
| {name: "SRGB U8", colorSettings: {colorSpace: "srgb", storageFormat: "uint8"}, |
| imageData: srgbImageDataU8}, |
| {name: "e-SRGB U16", colorSettings: {colorSpace: "srgb", |
| storageFormat: "uint16"}, imageData: e_srgbImageDataU16}, |
| {name: "e-SRGB F32", colorSettings: {colorSpace: "srgb", |
| storageFormat: "float32"}, imageData: e_srgbImageDataF32}, |
| ]; |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // * ImageData imagedata = ctx.createImageData(width, height); |
| // No color conversion. imagedata follows the color settings of the canvas. |
| |
| function runTestCreateImageDataWH(canvasColorSettings) { |
| var canvas = initializeColorManagedCanvas(canvasColorSettings); |
| var ctx = canvas.getContext('2d'); |
| var imageData = ctx.createImageData(xWidth, xHeight); |
| checkImageDataColorSettings(canvasColorSettings, imageData); |
| } |
| |
| var testScenariosCreateImageDataWH = []; |
| for (var i = 0; i < canvasColorSettingsSet.length; i++) { |
| var message = "Test cretateImageData(width, height) from " + |
| canvasColorSettingsSet[i].name + " canvas "; |
| testScenariosCreateImageDataWH. |
| push([message, canvasColorSettingsSet[i].colorSettings]); |
| } |
| |
| function runTestCreateImageDataWHTests() { |
| for (var i = 0; i < testScenariosCreateImageDataWH.length; i++){ |
| var t = test(function() { |
| runTestCreateImageDataWH(testScenariosCreateImageDataWH[i][1]); |
| }, testScenariosCreateImageDataWH[i][0]); |
| } |
| } |
| runTestCreateImageDataWHTests(); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // * ImageData imagedata = ctx.getImageData(sx, sy, sw, sh); |
| // No color conversion. imagedata follows the color settings of the canvas. |
| |
| function runTestGetImageDataXYWH(canvasColorSettings) { |
| var canvas = initializeColorManagedCanvas(canvasColorSettings); |
| var ctx = canvas.getContext('2d'); |
| var imageData = ctx.getImageData(0, 0, xWidth, xHeight); |
| checkImageDataColorSettings(canvasColorSettings, imageData); |
| checkImageDataColorValues(canvasColorSettings, imageData); |
| } |
| |
| var testScenariosGetImageDataXYWH = []; |
| for (var i = 0; i < canvasColorSettingsSet.length; i++) { |
| var message = "Test getImageData(sx, sy, sw, sh) from " + |
| canvasColorSettingsSet[i].name + " canvas "; |
| testScenariosGetImageDataXYWH. |
| push([message, canvasColorSettingsSet[i].colorSettings]); |
| } |
| |
| function runTestGetImageDataXYWHTests() { |
| for (var i = 0; i < testScenariosGetImageDataXYWH.length; i++){ |
| var t = test(function() { |
| runTestGetImageDataXYWH(testScenariosGetImageDataXYWH[i][1]); |
| }, testScenariosGetImageDataXYWH[i][0]); |
| } |
| } |
| runTestGetImageDataXYWHTests(); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // * void ctx.putImageData(imagedata, dx, dy, ...); |
| // Color conversion, if needed, to the color settings of the canvas. |
| |
| function runTestPutImageDataDxDy(canvasColorSettings, imageData) { |
| var canvas = document.createElement('canvas'); |
| canvas.width = xWidth * 2; |
| canvas.height = xHeight * 2; |
| var ctx = canvas.getContext('2d', |
| {colorSpace: canvasColorSettings.colorSpace, |
| pixelFormat: canvasColorSettings.pixelFormat}); |
| ctx.putImageData(imageData, xWidth/2, xHeight/2); |
| var ctxImageData = ctx.getImageData(xWidth/2, xHeight/2, xWidth, xHeight); |
| checkImageDataColorSettings(canvasColorSettings, ctxImageData); |
| checkImageDataColorValues(canvasColorSettings, ctxImageData, 'noBlank', |
| xWidth, xHeight, 'isWCG_U8toSRGB_U8'); |
| } |
| |
| var testScenariosPutImageDataDxDy = []; |
| for (var i = 0; i < canvasColorSettingsSet.length; i++) { |
| for (var j = 0; j < imageDataColorSettingsSet.length; j++) { |
| var message = "Test putImageData(imagedata, dx, dy): " + |
| canvasColorSettingsSet[i].name + " canvas, " + |
| imageDataColorSettingsSet[j].name + " ImageData"; |
| testScenariosPutImageDataDxDy. |
| push([message, canvasColorSettingsSet[i].colorSettings, |
| imageDataColorSettingsSet[j].imageData]); |
| } |
| } |
| |
| function runTestPutImageDataDxDyTests() { |
| for (var i = 0; i < testScenariosPutImageDataDxDy.length; i++){ |
| var t = test(function() { |
| runTestPutImageDataDxDy( |
| testScenariosPutImageDataDxDy[i][1], testScenariosPutImageDataDxDy[i][2]); |
| }, testScenariosPutImageDataDxDy[i][0]); |
| } |
| } |
| runTestPutImageDataDxDyTests(); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // * ImageData imageData = ctx.createImageData(imagedata); |
| // Color conversion, if needed, to the color settings of the canvas. The |
| // returned imageData should be transparent black. |
| |
| function runTestCreateImageDataFromImageData(canvasColorSettings, imageData) { |
| var canvas = document.createElement('canvas'); |
| canvas.width = xWidth * 2; |
| canvas.height = xHeight * 2; |
| var ctx = canvas.getContext('2d', |
| {colorSpace: canvasColorSettings.colorSpace, |
| pixelFormat: canvasColorSettings.pixelFormat}); |
| var ctxImageData = ctx.createImageData(imageData); |
| checkImageDataColorSettings(canvasColorSettings, ctxImageData); |
| checkImageDataColorValues(canvasColorSettings, ctxImageData, 'isBlank'); |
| } |
| |
| var testScenariosCreateImageDataFromImageData = []; |
| for (var i = 0; i < canvasColorSettingsSet.length; i++) { |
| for (var j = 0; j < imageDataColorSettingsSet.length; j++) { |
| var message = "Test createImageData(imagedata): " + |
| canvasColorSettingsSet[i].name + " canvas, " + |
| imageDataColorSettingsSet[j].name + " ImageData"; |
| testScenariosCreateImageDataFromImageData. |
| push([message, canvasColorSettingsSet[i].colorSettings, |
| imageDataColorSettingsSet[j].imageData]); |
| } |
| } |
| |
| function runTestCreateImageDataFromImageDataTests() { |
| for (var i = 0; i < testScenariosCreateImageDataFromImageData.length; i++){ |
| var t = test(function() { |
| runTestCreateImageDataFromImageData( |
| testScenariosCreateImageDataFromImageData[i][1], |
| testScenariosCreateImageDataFromImageData[i][2]); |
| }, testScenariosCreateImageDataFromImageData[i][0]); |
| } |
| } |
| runTestCreateImageDataFromImageDataTests(); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // *ImageData ctx.createImageData(width, height, imageDataColorSettings); |
| // No color conversion to the color settings of the canvas. Blank ImageData |
| // should be created based on imageDataColorSettings. |
| |
| function runTestCreateImageDataWHC(canvasColorSettings, imageDataColorSettings) { |
| var canvas = initializeColorManagedCanvas(canvasColorSettings); |
| var ctx = canvas.getContext('2d'); |
| width = height = 3; |
| var imageData = ctx.createImageData(width, height, imageDataColorSettings); |
| var colorSettings = imageData.getColorSettings(); |
| assert_equals(colorSettings.colorSpace, |
| imageDataColorSettings.colorSpace, |
| "colorSpace should match"); |
| assert_equals(colorSettings.storageFormat, |
| imageDataColorSettings.storageFormat, |
| "storageFormat should match"); |
| var blankData = new Array(4 * width * height).fill(0); |
| assert_array_equals(imageData.dataUnion, blankData, |
| "ImageData should be transparent black"); |
| } |
| |
| var testScenariosCreateImageDataWHC = []; |
| for (var i = 0; i < canvasColorSettingsSet.length; i++) { |
| for (var j = 0; j < imageDataColorSettingsSet.length; j++) { |
| message = "Test createImageData(width, height, imageDataColorSettings): " + |
| canvasColorSettingsSet[i].name + " canvas, " + |
| imageDataColorSettingsSet[j].name + " ImageData"; |
| testScenariosCreateImageDataWHC. |
| push([message, canvasColorSettingsSet[i].colorSettings, |
| imageDataColorSettingsSet[j].colorSettings]); |
| } |
| } |
| |
| function runTestCreateImageDataWHCTests() { |
| for (var i = 0; i < testScenariosCreateImageDataWHC.length; i++){ |
| var t = test(function() { |
| runTestCreateImageDataWHC( |
| testScenariosCreateImageDataWHC[i][1], |
| testScenariosCreateImageDataWHC[i][2]); |
| }, testScenariosCreateImageDataWHC[i][0]); |
| } |
| } |
| runTestCreateImageDataWHCTests(); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // *ImageData ctx.createImageData(data, width, height, imageDataColorSettings); |
| // No color conversion to the color settings of the canvas. ImageData is created |
| // from param "data" with proper storage format and is tagged with the |
| // CanvasColorSpace which is given in imageDataColorSettings. |
| |
| function runTestCreateImageDataDWHC(canvasColorSettings, imageData) { |
| var data = imageData.dataUnion; |
| width = xWidth; |
| height = xHeight; |
| var colorSettings = imageData.getColorSettings(); |
| |
| var canvas = initializeColorManagedCanvas(canvasColorSettings); |
| var ctx = canvas.getContext('2d'); |
| var newImageData = ctx.createImageData(data, width, height, colorSettings); |
| var newColorSettings = newImageData.getColorSettings(); |
| assert_equals(newColorSettings.colorSpace, |
| colorSettings.colorSpace, |
| "colorSpace should match"); |
| assert_equals(newColorSettings.storageFormat, |
| colorSettings.storageFormat, |
| "storageFormat should match"); |
| assert_array_equals(newImageData.dataUnion, imageData.dataUnion, |
| "ImageData should be transparent black"); |
| } |
| |
| var testScenariosCreateImageDataDWHC = []; |
| for (var i = 0; i < canvasColorSettingsSet.length; i++) { |
| for (var j = 0; j < imageDataColorSettingsSet.length; j++) { |
| message = "Test createImageData(data, width, height, imageDataColorSettings): " + |
| canvasColorSettingsSet[i].name + " canvas, " + |
| imageDataColorSettingsSet[j].name + " ImageData"; |
| testScenariosCreateImageDataDWHC. |
| push([message, canvasColorSettingsSet[i].colorSettings, |
| imageDataColorSettingsSet[j].imageData]); |
| } |
| } |
| |
| function runTestCreateImageDataDWHCTests() { |
| for (var i = 0; i < testScenariosCreateImageDataDWHC.length; i++){ |
| var t = test(function() { |
| runTestCreateImageDataDWHC( |
| testScenariosCreateImageDataDWHC[i][1], |
| testScenariosCreateImageDataDWHC[i][2]); |
| }, testScenariosCreateImageDataDWHC[i][0]); |
| } |
| } |
| runTestCreateImageDataDWHCTests(); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| </script> |