From 5bde59756442a8bde491d730e152f8246d8245e1 Mon Sep 17 00:00:00 2001 From: yiyix Date: Tue, 15 Dec 2020 18:20:25 +0000 Subject: [PATCH] Bug 1681453 [wpt PR 26813] - Change getImageData and createImageData to default to 8-bit sRGB, a=testonly Automatic update from web-platform-tests Change getImageData and createImageData to default to 8-bit sRGB In the initial implementation, if color setting information is missing in getImageData/createImageData, it uses the information of canvas to initialize the image data. In the spec, it says that it should use the default setting of {colorSpace: srgb, storageFormat: uint8} instead. In this cl, I updated the default behavior for the function getImageData and createImageData. Bug:1118182 Change-Id: I4fba4284028c060d5ac7ff80a294d95f8436ef62 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2567750 Reviewed-by: Fernando Serboncini Reviewed-by: ccameron Commit-Queue: Yi Xu Cr-Commit-Position: refs/heads/master@{#835734} -- wpt-commits: 0fb69997a8b5154bf39ba3ffa586c2aa25442da8 wpt-pr: 26813 --- ...anvas-colorManaged-convertToBlob-roundtrip.html | 10 ++++-- .../canvas-createImageBitmap-e_srgb.html | 28 ++++++++++------ .../canvas-createPutGetImageData-colorManaged.html | 30 +++++++++++------ .../canvas-draw-high-bit-depth-images.html | 12 +++++-- .../wide-gamut-canvas/canvas-drawImage-e_srgb.html | 6 ++-- .../canvas-drawImage-offscreenCanvas.html | 17 +++++++--- .../canvas-getImageData-e_srgb.html | 8 ++--- .../imageData-colorManagedBehavior.html | 39 +++++++++++++--------- .../wide-gamut-canvas/transferFromImageBitmap.html | 9 +++-- 9 files changed, 105 insertions(+), 54 deletions(-) diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-colorManaged-convertToBlob-roundtrip.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-colorManaged-convertToBlob-roundtrip.html index efb2665a8a5a..75bd34da3d13 100644 --- a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-colorManaged-convertToBlob-roundtrip.html +++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-colorManaged-convertToBlob-roundtrip.html @@ -78,7 +78,7 @@ function runConvertToBlobTest(testScenario) { var ctx = srcCanvas.getContext('2d', testScenario.canvasColorParam); var compositeOverBlack = (testScenario.encodeOptions.type == "image/jpeg"); drawPatternOnCanvsa(ctx, testScenario.alpha, compositeOverBlack); - var refPixels = ctx.getImageData(0, 0, 2, 2).data; + var refPixels = ctx.getImageData(0, 0, 2, 2, testScenario.imageSetting).data; var t = async_test("Test canvas convertToBlob(): " + testScenarioToString(testScenario)); @@ -88,7 +88,7 @@ function runConvertToBlobTest(testScenario) { var dstCanvas = createCanvas(testScenario); var dstCtx = dstCanvas.getContext('2d', testScenario.canvasColorParam); dstCtx.drawImage(image, 0, 0); - var actualPixels = dstCtx.getImageData(0, 0, 2, 2).data; + var actualPixels = dstCtx.getImageData(0, 0, 2, 2, testScenario.imageSetting).data; testPixels(actualPixels, refPixels, testScenario); }); @@ -122,6 +122,11 @@ function runAllTests() { {colorSpace: 'srgb', pixelFormat: 'uint8'}, {colorSpace: 'srgb', pixelFormat: 'float16'}, ]; + + var imageSettings = [ + {colorSpace: 'srgb', storageFormat: 'uint8'}, + {colorSpace: 'srgb', storageFormat: 'float32'}, + ]; var alphaValues = [0.5, 1]; // The *correct* way to test convertToBlob() is to directly examine the @@ -137,6 +142,7 @@ function runAllTests() { testScenario.encodeOptions = encodeOptionsSet[i]; testScenario.canvasColorParam = canvasColorParams[j]; testScenario.alpha = alphaValues[k]; + testScenario.imageSetting = imageSettings[j] testScenarioSet.push(testScenario); } diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-createImageBitmap-e_srgb.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-createImageBitmap-e_srgb.html index 72b8e278c600..9046a758c01b 100644 --- a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-createImageBitmap-e_srgb.html +++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-createImageBitmap-e_srgb.html @@ -37,13 +37,13 @@ var e_sRGB_TransparentBlueImage = [0.121521, 0.121521, 0.886230, 0.501953]; // sRGB(226,31,31,128) var e_sRGB_TransparentBlackImage = [0.121521, 0.121521, 0.121521, 0.501953]; -function testPixels(ctx, tests, sourceType) +function testPixels(ctx, tests, sourceType, imageSetting) { var actual, expected, tolerance = 0.025; if (sourceType === 'video') tolerance = 0.03; for (var i = 0; i < tests.length; i++) { - actual = ctx.getImageData(tests[i][0], tests[i][1], 1, 1).data; + actual = ctx.getImageData(tests[i][0], tests[i][1], 1, 1, imageSetting).data; assert_implements(actual, 'ImageData data not supported'); expected = tests[i][2]; assert_equals(actual.length, expected.length); @@ -59,6 +59,7 @@ function checkNoCrop(imageBitmap, colorInfo, sourceType) canvas.height = 50; var ctx = canvas.getContext('2d', {colorSpace: 'srgb', pixelFormat:'float16'}); + var imageSetting = {colorSpace: 'srgb', storageFormat:'float32'} ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(imageBitmap, 0, 0); var tests; @@ -100,7 +101,7 @@ function checkNoCrop(imageBitmap, colorInfo, sourceType) "This pixel should be e-sRGB transparent black."], [41, 41, transparentBlack, "This pixel should be transparent black."]]; - testPixels(ctx, tests, sourceType); + testPixels(ctx, tests, sourceType, imageSetting); } function checkCrop(imageBitmap, colorInfo, sourceType) @@ -110,6 +111,7 @@ function checkCrop(imageBitmap, colorInfo, sourceType) canvas.height = 50; var ctx = canvas.getContext('2d', {colorSpace: 'srgb', pixelFormat:'float16'}); + var imageSetting = {colorSpace: 'srgb', storageFormat:'float32'}; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(imageBitmap, 0, 0); var tests; @@ -151,7 +153,7 @@ function checkCrop(imageBitmap, colorInfo, sourceType) "This pixel should be e-sRGB transparent black."], [21, 21, transparentBlack, "This pixel should be transparent black."]]; - testPixels(ctx, tests, sourceType); + testPixels(ctx, tests, sourceType, imageSetting); } @@ -171,9 +173,11 @@ function compareBitmaps(bitmap1, bitmap2) ctx2.clearRect(0, 0, canvas2.width, canvas2.height); ctx1.drawImage(bitmap1, 0, 0); ctx2.drawImage(bitmap2, 0, 0); - var data1 = ctx1.getImageData(0, 0, 50, 50).data; + var data1 = ctx1.getImageData(0, 0, 50, 50, + {colorSpace: 'srgb', storageFormat:'float32'}).data; assert_implements(data1, 'ImageData data not supported'); - var data2 = ctx2.getImageData(0, 0, 50, 50).data; + var data2 = ctx2.getImageData(0, 0, 50, 50, + {colorSpace: 'srgb', storageFormat:'float32'}).data; assert_implements(data2, 'ImageData data not supported'); var dataMatched = true; for (var i = 0; i < data1.length; i++) { @@ -430,7 +434,8 @@ runAllCreateImageBitmapFromColorManagedBlobTests(); promise_test(async () => { var canvas = initializeTestCanvas('srgb', 'uint8'); var ctx = canvas.getContext('2d'); - var data = ctx.getImageData(0, 0, 20, 20); + var data = ctx.getImageData(0, 0, 20, 20, + {colorSpace: 'srgb', storageFormat:'uint8'}); await testImageBitmapOpaque(data); }, 'createImageBitmap in e-sRGB from an opaque sRGB ImageData with resize.'); @@ -439,7 +444,8 @@ promise_test(async () => { var canvas = initializeTestCanvas('srgb', 'float16'); var ctx = canvas.getContext('2d', {colorSpace: 'srgb', pixelFormat:'float16'}); - var data = ctx.getImageData(0, 0, 20, 20); + var data = ctx.getImageData(0, 0, 20, 20, + {colorSpace: 'srgb', storageFormat:'float32'}); await testImageBitmapOpaque(data); }, 'createImageBitmap in e-sRGB from an opaque e-sRGB ImageData with resize.'); @@ -449,7 +455,8 @@ promise_test(async () => { promise_test(async () => { var canvas = initializeTestCanvasTransparent('srgb', 'uint8'); var ctx = canvas.getContext('2d'); - var data = ctx.getImageData(0, 0, 20, 20); + var data = ctx.getImageData(0, 0, 20, 20, + {colorSpace: 'srgb', storageFormat:'uint8'}); await testImageBitmapTransparent(data); }, 'createImageBitmap in e-sRGB from a transparent sRGB ImageData with resize.'); @@ -458,7 +465,8 @@ promise_test(async () => { var canvas = initializeTestCanvasTransparent('srgb', 'float16'); var ctx = canvas.getContext('2d', {colorSpace: 'srgb', pixelFormat:'float16'}); - var data = ctx.getImageData(0, 0, 20, 20); + var data = ctx.getImageData(0, 0, 20, 20, + {colorSpace: 'srgb', storageFormat:'float32'}); await testImageBitmapTransparent(data); }, 'createImageBitmap in e-sRGB from a transparent e-sRGB ImageData with resize.'); diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-createPutGetImageData-colorManaged.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-createPutGetImageData-colorManaged.html index c72dc97cd0cf..b58d78ffafc3 100644 --- a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-createPutGetImageData-colorManaged.html +++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-createPutGetImageData-colorManaged.html @@ -20,12 +20,12 @@ function checkImageData(canvasColorSettings, imageData) { // Test createImageData when the canvas is color managed var helperImageData = new ImageData(xWidth, xHeight); -function runTestCreateImageData(canvasColorSettings) { +function runTestCreateImageData(canvasColorSettings, imageSetting) { var aCanvas = document.createElement("canvas"); aCanvas.width = xWidth; aCanvas.height = xHeight; var ctx = aCanvas.getContext('2d', canvasColorSettings); - var imageData = ctx.createImageData(xWidth, xHeight); + var imageData = ctx.createImageData(xWidth, xHeight, imageSetting); checkImageData(canvasColorSettings, imageData); imageData = ctx.createImageData(helperImageData); @@ -34,41 +34,47 @@ function runTestCreateImageData(canvasColorSettings) { var testScenariosCreateImageData = [ ["Test color managed cretateImageData: {srgb, uint8} -> {srgb, uint8}", - {colorSpace: "srgb", pixelFormat: "uint8"}], + {colorSpace: "srgb", pixelFormat: "uint8"}, + {colorSpace: "srgb", storageFormat: "uint8"}], ["Test color managed cretateImageData: {srgb, float16} -> {srgb, float32}", - {colorSpace: "srgb", pixelFormat: "float16"}], + {colorSpace: "srgb", pixelFormat: "float16"}, + {colorSpace: "srgb", storageFormat: "float32"}], ]; function runCreateImageDataTests() { for (var i = 0; i < testScenariosCreateImageData.length; i++){ var t = test(function() { - runTestCreateImageData(testScenariosCreateImageData[i][1]); + runTestCreateImageData(testScenariosCreateImageData[i][1], + testScenariosCreateImageData[i][2]); }, testScenariosCreateImageData[i][0]); } } runCreateImageDataTests(); // Test getImageData when the canvas is color managed -function runTestGetImageData(canvasColorSettings) { +function runTestGetImageData(canvasColorSettings, imageSetting) { var aCanvas = document.createElement("canvas"); aCanvas.width = xWidth; aCanvas.height = xHeight; var ctx = aCanvas.getContext('2d', canvasColorSettings); - var imageData = ctx.getImageData(0, 0, xWidth, xHeight); + var imageData = ctx.getImageData(0, 0, xWidth, xHeight, imageSetting); checkImageData(canvasColorSettings, imageData); } var testScenariosGetImageData = [ ["Test color managed getImageData: {srgb, uint8} -> {srgb, uint8}", - {colorSpace: "srgb", pixelFormat: "uint8"}], + {colorSpace: "srgb", pixelFormat: "uint8"}, + {colorSpace: "srgb", storageFormat: "uint8"}], ["Test color managed getImageData: {srgb, float16} -> {srgb, float32}", - {colorSpace: "srgb", pixelFormat: "float16"}], + {colorSpace: "srgb", pixelFormat: "float16"}, + {colorSpace: "srgb", storageFormat: "float32"}], ]; function runGetImageDataTests() { for (var i = 0; i < testScenariosGetImageData.length; i++){ var t = test(function() { - runTestGetImageData(testScenariosGetImageData[i][1]); + runTestGetImageData(testScenariosGetImageData[i][1], + testScenariosGetImageData[i][2]); }, testScenariosGetImageData[i][0]); } } @@ -81,6 +87,7 @@ function prepareTestScenariosPutImageData() { var colorSpaces = ["srgb"]; var imageDataStorageFormats = ["uint8", "uint16", "float32"]; var canvasPixelFormats = ["uint8", "float16"]; + // var canvasStorageFormats = ["uint8", "float32"]; for (i = 0; i < colorSpaces.length; i++) for (j = 0; j < imageDataStorageFormats.length; j++) @@ -93,7 +100,8 @@ function prepareTestScenariosPutImageData() { {colorSpace: colorSpaces[i], storageFormat: imageDataStorageFormats[j]}; canvasColorSettings = {colorSpace: colorSpaces[k], pixelFormat: canvasPixelFormats[l]}; - testScenariosPutImageData.push([testTitle, imageDataColorSettings, canvasColorSettings]); + testScenariosPutImageData.push([testTitle, imageDataColorSettings, + canvasColorSettings]); } } diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-draw-high-bit-depth-images.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-draw-high-bit-depth-images.html index 9907c4e2cf57..d830d6ea335a 100644 --- a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-draw-high-bit-depth-images.html +++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-draw-high-bit-depth-images.html @@ -29,14 +29,16 @@ function runTest(testScenario) { var refCtx = refCanvas.getContext( '2d', testScenario.canvasColorParams); refCtx.drawImage(_8bitImage, 0, 0); - var refPixels = refCtx.getImageData(0, 0, 2, 2).data; + var refPixels = refCtx.getImageData(0, 0, 2, 2, + testScenario.imageSetting).data; var testCanvas = document.createElement("canvas"); testCanvas.width = testCanvas.height = 2; var testCtx = testCanvas.getContext( '2d', testScenario.canvasColorParams); testCtx.drawImage(_16bitImage, 0, 0); - var testPixels = testCtx.getImageData(0, 0, 2, 2).data; + var testPixels = testCtx.getImageData(0, 0, 2, 2, + testScenario.imageSetting).data; assert_array_approx_equals(refPixels, testPixels, tolerance); @@ -73,6 +75,11 @@ function runAllTests() { {colorSpace: 'srgb', pixelFormat: 'float16'}, ]; + var imageSettings = [ + {colorSpace: 'srgb', storageFormat: 'uint8'}, + {colorSpace: 'srgb', storageFormat: 'float32'}, + ]; + var testScenarioSet = []; var id = 1; for (var i = 0; i < canvasColorParams.length; i++) { @@ -81,6 +88,7 @@ function runAllTests() { for (var m = 0; m < pngInterlaceStatus.length; m++) { var testScenario = {}; testScenario.canvasColorParams = canvasColorParams[i]; + testScenario.imageSetting = imageSettings[i]; testScenario._8bitImagePath = _8bitPngPrefix + pngColorSpaces[j] + pngTransparencyStatus[k] + ".png"; testScenario._16bitImagePath = _16bitPngPrefix + diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-drawImage-e_srgb.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-drawImage-e_srgb.html index b6ff5f4657a1..793cd920338b 100644 --- a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-drawImage-e_srgb.html +++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-drawImage-e_srgb.html @@ -12,11 +12,11 @@ var e_sRGB_TransparentBlue = [0.121521, 0.121521, 0.886230, 0.501953]; // sRGB(226,31,31,128) var e_sRGB_TransparentBlack = [0.121521, 0.121521, 0.121521, 0.501953]; -function testPixels(ctx, tests) +function testPixels(ctx, tests, imageSetting) { var actual, expected, tolerance = 0.01; for (var i = 0; i < tests.length; i++) { - actual = ctx.getImageData(tests[i].x, tests[i].y, 1, 1).data; + actual = ctx.getImageData(tests[i].x, tests[i].y, 1, 1, imageSetting).data; expected = tests[i].color; assert_equals(actual.length, expected.length); for (var j = 0; j < actual.length; j++) @@ -36,7 +36,7 @@ function drawSRGBImageOnExtendedSRGBCanvas(source) {x: 15, y: 5, color: e_sRGB_TransparentGreen}, {x: 5, y: 15, color: e_sRGB_TransparentBlue}, {x: 15, y: 15, color: e_sRGB_TransparentBlack}]; - testPixels(ctx, tests); + testPixels(ctx, tests, {colorSpace: 'srgb', storageFormat:'float32'}); } promise_test(function() { diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-drawImage-offscreenCanvas.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-drawImage-offscreenCanvas.html index 7edbc5ee3c9f..aebcea3c1d14 100644 --- a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-drawImage-offscreenCanvas.html +++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-drawImage-offscreenCanvas.html @@ -88,10 +88,10 @@ function initializeOffscreenCanvasTransparent(canvasColorSpace, canvasPixelForma return offscreen; } -function testPixels(testCtx, refCtx, pixelFormat, isTrnasparent) +function testPixels(testCtx, refCtx, pixelFormat, image_setting, isTrnasparent) { - var actual = testCtx.getImageData(0, 0, 4, 4).data; - var expected = refCtx.getImageData(0, 0, 4, 4).data; + var actual = testCtx.getImageData(0, 0, 4, 4, image_setting).data; + var expected = refCtx.getImageData(0, 0, 4, 4, image_setting).data; var tolerance = 4; if (pixelFormat === 'float16') @@ -111,8 +111,10 @@ function runDrawOffscreenCanvasTestOpaque(testScenario) { var offscreen_canvas_opaque = initializeOffscreenCanvas( testScenario.imageColorSpace, testScenario.imagePixelFormat); canvas_ctx_blank.drawImage(offscreen_canvas_opaque, 0, 0); + var image_setting = {colorSpace: testScenario.canvasColorSpace, + storageFormat: testScenario.storageFormat} testPixels(canvas_ctx_blank, canvas_ctx_opaque, - testScenario.canvasPixelFormat, false); + testScenario.canvasPixelFormat, image_setting, false); } function runDrawOffscreenCanvasTestTransparent(testScenario) { @@ -124,19 +126,23 @@ function runDrawOffscreenCanvasTestTransparent(testScenario) { var offscreen_canvas_transparent = initializeOffscreenCanvasTransparent( testScenario.imageColorSpace, testScenario.imagePixelFormat); canvas_ctx_blank.drawImage(offscreen_canvas_transparent, 0, 0); + var image_setting = {colorSpace: testScenario.canvasColorSpace, + storageFormat: testScenario.storageFormat} testPixels(canvas_ctx_blank, canvas_ctx_transparent, - testScenario.canvasPixelFormat, true); + testScenario.canvasPixelFormat, image_setting, true); } function runAllTests() { var canvasColorSpaces = ['srgb']; var canvasPixelFormats = ['uint8', 'float16']; + var storageFormats = ['uint8', 'float32']; var testScenarioSet = []; for (var i = 0; i < canvasColorSpaces.length; i++) { for (var j = 0; j < canvasPixelFormats.length; j++) { var canvas_color_space = canvasColorSpaces[i]; var canvas_pixel_format = canvasPixelFormats[j]; + var image_storage_format = storageFormats[j]; for (var k = 0; k < canvasColorSpaces.length; k++) { for (var m = 0; m < canvasPixelFormats.length; m++) { var image_host_color_space = canvasColorSpaces[k]; @@ -147,6 +153,7 @@ function runAllTests() { testScenario.canvasPixelFormat = canvas_pixel_format; testScenario.imageColorSpace = image_host_color_space; testScenario.imagePixelFormat = image_host_pixel_format; + testScenario.storageFormat = image_storage_format; testScenarioSet.push(testScenario); } } diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-getImageData-e_srgb.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-getImageData-e_srgb.html index cfc6428d0d0c..03e0d29720d6 100644 --- a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-getImageData-e_srgb.html +++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-getImageData-e_srgb.html @@ -27,7 +27,7 @@ function drawSRGBThenGetImageData_e_sRGB() { {colorSpace: 'srgb', pixelFormat:'float16'}); ctx.fillStyle = 'rgba(51, 102, 153, 0.8)'; ctx.fillRect(0, 0, 10, 10); - var pixel = ctx.getImageData(5, 5, 1, 1).data; + var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: 'srgb', storageFormat:'float32'}).data; // Check against the same color in e-sRGB. 0.01 protects the test against // color conversion deviations. assert_array_approx_equals(pixel, [0.2, 0.4, 0.6, 0.8], 0.01); @@ -46,7 +46,7 @@ function putImageData_e_sRGBThenGetImageData_e_sRGB_InRange() { imageData.data[2] = 0.6; imageData.data[3] = 0.8; ctx.putImageData(imageData, 5, 5); - var pixel = ctx.getImageData(5, 5, 1, 1).data; + var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: 'srgb', storageFormat:'float32'}).data; // Check against the same color in e-sRGB. 0.001 protects the test against // rounding errors. assert_array_approx_equals(pixel, [0.2, 0.4, 0.6, 0.8], 0.01); @@ -65,7 +65,7 @@ function putImageData_e_sRGBThenGetImageData_e_sRGB_OutOfRange() { imageData.data[2] = 0.7; imageData.data[3] = 1.8; ctx.putImageData(imageData, 5, 5); - var pixel = ctx.getImageData(5, 5, 1, 1).data; + var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: 'srgb', storageFormat:'float32'}).data; // Check against the same color in e-sRGB. 0.001 protects the test against // rounding errors. assert_array_approx_equals(pixel, [1.3, -1.13, 0.7, 1.8], 0.01); @@ -85,7 +85,7 @@ function putImageDataSRGBThenGetImageData_e_sRGB() { imageData.data[2] = 153; imageData.data[3] = 204; ctx.putImageData(imageData, 5, 5); - var pixel = ctx.getImageData(5, 5, 1, 1).data; + var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: 'srgb', storageFormat:'float32'}).data; // Check against the same color in e-sRGB. 0.01 protects the test against // color conversion deviations. assert_array_approx_equals(pixel, [0.2, 0.4, 0.6, 0.8], 0.01); diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/imageData-colorManagedBehavior.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/imageData-colorManagedBehavior.html index 737d2b6ec730..c82bf4cc74b9 100644 --- a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/imageData-colorManagedBehavior.html +++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/imageData-colorManagedBehavior.html @@ -87,8 +87,10 @@ function initializeColorManagedCanvas(canvasColorSettings) } var canvasColorSettingsSet = [ - {name: "SRGB", colorSettings: {colorSpace: "srgb", pixelFormat: "uint8"}}, - {name: "e-SRGB", colorSettings: {colorSpace: "srgb", pixelFormat: "float16"}}, + {name: "SRGB", colorSettings: {colorSpace: "srgb", pixelFormat: "uint8"}, + imageSetting: {colorSpace: "srgb", storageFormat: "uint8"}}, + {name: "e-SRGB", colorSettings: {colorSpace: "srgb", pixelFormat: "float16"}, + imageSetting: {colorSpace: "srgb", storageFormat: "float32"}}, ]; var srgbImageDataU8, e_srgbImageDataU16, e_srgbImageDataF32; @@ -127,10 +129,10 @@ var imageDataColorSettingsSet = [ // * ImageData imagedata = ctx.createImageData(width, height); // No color conversion. imagedata follows the color settings of the canvas. -function runTestCreateImageDataWH(canvasColorSettings) { +function runTestCreateImageDataWH(canvasColorSettings, imageSetting) { var canvas = initializeColorManagedCanvas(canvasColorSettings); var ctx = canvas.getContext('2d'); - var imageData = ctx.createImageData(xWidth, xHeight); + var imageData = ctx.createImageData(xWidth, xHeight, imageSetting); checkImageDataColorSettings(canvasColorSettings, imageData); } @@ -139,13 +141,15 @@ for (var i = 0; i < canvasColorSettingsSet.length; i++) { var message = "Test createImageData(width, height) from " + canvasColorSettingsSet[i].name + " canvas "; testScenariosCreateImageDataWH. - push([message, canvasColorSettingsSet[i].colorSettings]); + push([message, canvasColorSettingsSet[i].colorSettings, + canvasColorSettingsSet[i].imageSetting]); } function runTestCreateImageDataWHTests() { for (var i = 0; i < testScenariosCreateImageDataWH.length; i++){ var t = test(function() { - runTestCreateImageDataWH(testScenariosCreateImageDataWH[i][1]); + runTestCreateImageDataWH(testScenariosCreateImageDataWH[i][1], + testScenariosCreateImageDataWH[i][2]); }, testScenariosCreateImageDataWH[i][0]); } } @@ -156,10 +160,10 @@ runTestCreateImageDataWHTests(); // * ImageData imagedata = ctx.getImageData(sx, sy, sw, sh); // No color conversion. imagedata follows the color settings of the canvas. -function runTestGetImageDataXYWH(canvasColorSettings) { +function runTestGetImageDataXYWH(canvasColorSettings, imageSetting) { var canvas = initializeColorManagedCanvas(canvasColorSettings); var ctx = canvas.getContext('2d'); - var imageData = ctx.getImageData(0, 0, xWidth, xHeight); + var imageData = ctx.getImageData(0, 0, xWidth, xHeight, imageSetting); checkImageDataColorSettings(canvasColorSettings, imageData); checkImageDataColorValues(canvasColorSettings, imageData); } @@ -169,13 +173,15 @@ 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]); + push([message, canvasColorSettingsSet[i].colorSettings, + canvasColorSettingsSet[i].imageSetting]); } function runTestGetImageDataXYWHTests() { for (var i = 0; i < testScenariosGetImageDataXYWH.length; i++){ var t = test(function() { - runTestGetImageDataXYWH(testScenariosGetImageDataXYWH[i][1]); + runTestGetImageDataXYWH(testScenariosGetImageDataXYWH[i][1], + testScenariosGetImageDataXYWH[i][2]); }, testScenariosGetImageDataXYWH[i][0]); } } @@ -186,7 +192,7 @@ runTestGetImageDataXYWHTests(); // * void ctx.putImageData(imagedata, dx, dy, ...); // Color conversion, if needed, to the color settings of the canvas. -function runTestPutImageDataDxDy(canvasColorSettings, imageData) { +function runTestPutImageDataDxDy(canvasColorSettings, imageData, imageSetting) { var canvas = document.createElement('canvas'); canvas.width = xWidth * 2; canvas.height = xHeight * 2; @@ -194,7 +200,7 @@ function runTestPutImageDataDxDy(canvasColorSettings, imageData) { {colorSpace: canvasColorSettings.colorSpace, pixelFormat: canvasColorSettings.pixelFormat}); ctx.putImageData(imageData, xWidth/2, xHeight/2); - var ctxImageData = ctx.getImageData(xWidth/2, xHeight/2, xWidth, xHeight); + var ctxImageData = ctx.getImageData(xWidth/2, xHeight/2, xWidth, xHeight, imageSetting); checkImageDataColorSettings(canvasColorSettings, ctxImageData); checkImageDataColorValues(canvasColorSettings, ctxImageData, 'noBlank', xWidth, xHeight, 'isWCG_U8toSRGB_U8'); @@ -208,7 +214,8 @@ for (var i = 0; i < canvasColorSettingsSet.length; i++) { imageDataColorSettingsSet[j].name + " ImageData"; testScenariosPutImageDataDxDy. push([message, canvasColorSettingsSet[i].colorSettings, - imageDataColorSettingsSet[j].imageData]); + imageDataColorSettingsSet[j].imageData, + canvasColorSettingsSet[i].imageSetting]); } } @@ -216,7 +223,8 @@ function runTestPutImageDataDxDyTests() { for (var i = 0; i < testScenariosPutImageDataDxDy.length; i++){ var t = test(function() { runTestPutImageDataDxDy( - testScenariosPutImageDataDxDy[i][1], testScenariosPutImageDataDxDy[i][2]); + testScenariosPutImageDataDxDy[i][1], testScenariosPutImageDataDxDy[i][2], + testScenariosPutImageDataDxDy[i][3]); }, testScenariosPutImageDataDxDy[i][0]); } } @@ -248,7 +256,8 @@ for (var i = 0; i < canvasColorSettingsSet.length; i++) { imageDataColorSettingsSet[j].name + " ImageData"; testScenariosCreateImageDataFromImageData. push([message, canvasColorSettingsSet[i].colorSettings, - imageDataColorSettingsSet[j].imageData]); + imageDataColorSettingsSet[j].imageData, + canvasColorSettingsSet[i].imageSetting]); } } diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/transferFromImageBitmap.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/transferFromImageBitmap.html index ff8abeb897f2..1b9039615496 100644 --- a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/transferFromImageBitmap.html +++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/transferFromImageBitmap.html @@ -41,7 +41,7 @@ function generateExpectedResult(testScenario, canvas) ctx.fillRect(0, 1, 1, 1); ctx.fillStyle = generateFillStyle(27, 27, 27, testScenario.alpha); ctx.fillRect(1, 1, 1, 1); - return ctx.getImageData(0, 0, 2, 2).data; + return ctx.getImageData(0, 0, 2, 2, testScenario.imageSetting).data; } function generateTestName(testScenario) { @@ -79,7 +79,7 @@ function runTransferFromImageBitmapTest(testScenario) { {colorSpace: testScenario.colorSpace, pixelFormat: testScenario.pixelFormat}); ctx.drawImage(dstCanvas, 0, 0); - var actualPixels = ctx.getImageData(0, 0, 2, 2).data; + var actualPixels = ctx.getImageData(0, 0, 2, 2, testScenario.imageSetting).data; testPixels(actualPixels, expectedPixels, testScenario); }); }, generateTestName(testScenario)); @@ -91,6 +91,10 @@ function runAllTests() { {colorSpace: 'srgb', pixelFormat: 'uint8'}, {colorSpace: 'srgb', pixelFormat: 'float16'}, ]; + var imageSettings = [ + {colorSpace: 'srgb', storageFormat: 'uint8'}, + {colorSpace: 'srgb', storageFormat: 'float32'}, + ]; var alphaValues = [0.5, 1]; var colorSpaceConversions = ['none', 'default']; @@ -103,6 +107,7 @@ function runAllTests() { testScenario.pixelFormat = colorSpaces[i].pixelFormat; testScenario.alpha = alphaValues[j]; testScenario.colorSpaceConversion = colorSpaceConversions[k]; + testScenario.imageSetting = imageSettings[i]; testScenarios.push(testScenario); } -- 2.11.4.GIT