| <!DOCTYPE HTML> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <script> |
| |
| // Reference values generated by: |
| // https://fiddle.skia.org/c/8e7238b69744678e75b3e34715b29e0b |
| |
| var transparentBlack = [0, 0, 0, 0]; |
| |
| // sRGB(255,0,0,255) |
| var rec2020Red = [0.82324, 0.32935, 0.18030, 1.00000]; |
| // sRGB(0,255,0,255) |
| var rec2020Green = [0.63135, 0.96436, 0.36450, 1.00000]; |
| // sRGB(0,0,255,255) |
| var rec2020Blue = [0.27051, 0.15283, 0.95654, 1.00000]; |
| // sRGB(0,0,0,255) |
| var rec2020Black = [0.00000, 0.00000, 0.00000, 1.00000]; |
| |
| // sRGB(155,27,27,255) |
| var rec2020OpaqueRed = [0.52148, 0.23914, 0.18030, 1.00000]; |
| // sRGB(27,155,27,255) |
| var rec2020OpaqueGreen = [0.40771, 0.60742, 0.25879, 1.00000]; |
| // sRGB(27,27,155,255) |
| var rec2020OpaqueBlue = [0.21558, 0.17249, 0.59961, 1.00000]; |
| // sRGB(27,27,27,255) |
| var rec2020OpaqueBlack = [0.15283, 0.15283, 0.15283, 1.00000]; |
| |
| // sRGB(155,27,27,128) |
| var rec2020TransparentRed = [0.52148, 0.23914, 0.18030, 0.50195]; |
| // sRGB(27,155,27,128) |
| var rec2020TransparentGreen = [0.40771, 0.60742, 0.25879, 0.50195]; |
| // sRGB(27,27,155,128) |
| var rec2020TransparentBlue = [0.21558, 0.17249, 0.59961, 0.50195]; |
| // sRGB(27,27,27,128) |
| var rec2020TransparentBlack = [0.15283, 0.15283, 0.15283, 0.50195]; |
| |
| // sRGB(226,31,31,128) |
| var rec2020TransparentRedImage = [0.73682, 0.32153, 0.21960, 0.50195]; |
| // sRGB(226,31,31,128) |
| var rec2020TransparentGreenImage = [0.56836, 0.86230, 0.34888, 0.50195]; |
| // sRGB(226,31,31,128) |
| var rec2020TransparentBlueImage = [0.27832, 0.20386, 0.85059, 0.50195]; |
| // sRGB(226,31,31,128) |
| var rec2020TransparentBlackImage = [0.16858, 0.16858, 0.16858, 0.50195]; |
| |
| function testPixels(ctx, tests, sourceType, imageDataSetting) |
| { |
| var actual, expected, tolerance = 0.02; |
| if (sourceType === 'video') |
| tolerance = 0.04; |
| for (var i = 0; i < tests.length; i++) { |
| actual = ctx.getImageData(tests[i][0], tests[i][1], 1, 1, imageDataSetting).data; |
| expected = tests[i][2]; |
| assert_true(actual.length === expected.length); |
| for (var j = 0; j < actual.length; j++) |
| assert_approx_equals(actual[j], expected[j], tolerance, tests[i][3]); |
| } |
| } |
| |
| function checkNoCrop(imageBitmap, colorInfo, sourceType) |
| { |
| var canvas = document.createElement('canvas'); |
| canvas.width = 50; |
| canvas.height = 50; |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'rec2020', pixelFormat:'float16'}); |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| ctx.drawImage(imageBitmap, 0, 0); |
| var tests; |
| if (colorInfo == 'fullColor') |
| tests = [[0, 0, rec2020Red, "This pixel should be Rec2020 red."], |
| [39, 0, rec2020Green, "This pixel should be Rec2020 green."], |
| [0, 39, rec2020Blue, "This pixel should be Rec2020 blue."], |
| [39, 39, rec2020Black, "This pixel should be Rec2020 black."], |
| [41, 41, transparentBlack, "This pixel should be transparent black."]]; |
| else if (colorInfo == 'opaque') |
| tests = [[0, 0, rec2020OpaqueRed, |
| "This pixel should be Rec2020 like red."], |
| [39, 0, rec2020OpaqueGreen, |
| "This pixel should be Rec2020 like green."], |
| [0, 39, rec2020OpaqueBlue, |
| "This pixel should be Rec2020 like blue."], |
| [39, 39, rec2020OpaqueBlack, |
| "This pixel should be Rec2020 like black."], |
| [41, 41, transparentBlack, "This pixel should be transparent black."]]; |
| else if (colorInfo == 'transparent') |
| tests = [[0, 0, rec2020TransparentRed, |
| "This pixel should be Rec2020 transparent red."], |
| [39, 0, rec2020TransparentGreen, |
| "This pixel should be Rec2020 transparent green."], |
| [0, 39, rec2020TransparentBlue, |
| "This pixel should be Rec2020 transparent blue."], |
| [39, 39, rec2020TransparentBlack, |
| "This pixel should be Rec2020 transparent black."], |
| [41, 41, transparentBlack, |
| "This pixel should be transparent black."]]; |
| else if (colorInfo === 'transparent-image') |
| tests = [[0, 0, rec2020TransparentRedImage, |
| "This pixel should be Rec 2020 transparent red."], |
| [39, 0, rec2020TransparentGreenImage, |
| "This pixel should be Rec 2020 transparent green."], |
| [0, 39, rec2020TransparentBlueImage, |
| "This pixel should be Rec 2020 transparent blue."], |
| [39, 39, rec2020TransparentBlackImage, |
| "This pixel should be Rec 2020 transparent black."], |
| [41, 41, transparentBlack, |
| "This pixel should be transparent black."]]; |
| testPixels(ctx, tests, sourceType, {colorSpace: 'rec2020', storageFormat:'float32'}); |
| } |
| |
| function checkCrop(imageBitmap, colorInfo, sourceType) |
| { |
| var canvas = document.createElement('canvas'); |
| canvas.width = 50; |
| canvas.height = 50; |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'rec2020', pixelFormat:'float16'}); |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| ctx.drawImage(imageBitmap, 0, 0); |
| var tests; |
| if (colorInfo === 'fullColor') |
| tests = [[0, 0, rec2020Red, "This pixel should be Rec2020 red."], |
| [19, 0, rec2020Green, "This pixel should be Rec2020 green."], |
| [0, 19, rec2020Blue, "This pixel should be Rec2020 blue."], |
| [19, 19, rec2020Black, "This pixel should be Rec2020 black."], |
| [21, 21, transparentBlack, "This pixel should be transparent black."]]; |
| else if (colorInfo === 'opaque') |
| tests = [[0, 0, rec2020OpaqueRed, |
| "This pixel should be Rec2020 like red."], |
| [19, 0, rec2020OpaqueGreen, |
| "This pixel should be Rec2020 like green."], |
| [0, 19, rec2020OpaqueBlue, |
| "This pixel should be Rec2020 like blue."], |
| [19, 19, rec2020OpaqueBlack, |
| "This pixel should be Rec2020 like black."], |
| [21, 21, transparentBlack, |
| "This pixel should be transparent black."]]; |
| else if (colorInfo === 'transparent') |
| tests = [[0, 0, rec2020TransparentRed, |
| "This pixel should be Rec2020 transparent red."], |
| [19, 0, rec2020TransparentGreen, |
| "This pixel should be Rec2020 transparent green."], |
| [0, 19, rec2020TransparentBlue, |
| "This pixel should be Rec2020 transparent blue."], |
| [19, 19, rec2020TransparentBlack, |
| "This pixel should be Rec2020 transparent black."], |
| [21, 21, transparentBlack, |
| "This pixel should be transparent black."]]; |
| else if (colorInfo === 'transparent-image') |
| tests = [[0, 0, rec2020TransparentRedImage, |
| "This pixel should be Rec2020 transparent red."], |
| [19, 0, rec2020TransparentGreenImage, |
| "This pixel should be Rec2020 transparent green."], |
| [0, 19, rec2020TransparentBlueImage, |
| "This pixel should be Rec2020 transparent blue."], |
| [19, 19, rec2020TransparentBlackImage, |
| "This pixel should be Rec2020 transparent black."], |
| [21, 21, transparentBlack, |
| "This pixel should be transparent black."]]; |
| testPixels(ctx, tests, sourceType, {colorSpace: 'rec2020', storageFormat:'float32'}); |
| } |
| |
| |
| function compareBitmaps(bitmap1, bitmap2) |
| { |
| var canvas1 = document.createElement('canvas'); |
| var canvas2 = document.createElement('canvas'); |
| canvas1.width = 50; |
| canvas1.height = 50; |
| canvas2.width = 50; |
| canvas2.height = 50; |
| var ctx1 = canvas1.getContext('2d', |
| {colorSpace: 'rec2020', pixelFormat:'float16'}); |
| var ctx2 = canvas2.getContext('2d', |
| {colorSpace: 'rec2020', pixelFormat:'float16'}); |
| var imageDataSetting = {colorSpace: 'rec2020', storageFormat:'float32'} |
| ctx1.clearRect(0, 0, canvas1.width, canvas1.height); |
| 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, imageDataSetting).data; |
| var data2 = ctx2.getImageData(0, 0, 50, 50, imageDataSetting).data; |
| var dataMatched = true; |
| for (var i = 0; i < data1.length; i++) { |
| if (data1[i] != data2[i]) { |
| dataMatched = false; |
| break; |
| } |
| } |
| assert_false(dataMatched); |
| } |
| |
| function testImageBitmap(source, colorInfo, sourceType) |
| { |
| return Promise.all([ |
| createImageBitmap(source, { |
| resizeWidth: 40, resizeHeight: 40, resizeQuality: "high"}), |
| createImageBitmap(source, { |
| resizeWidth: 40, resizeHeight: 40, resizeQuality: "medium"}), |
| createImageBitmap(source, { |
| resizeWidth: 40, resizeHeight: 40, resizeQuality: "low"}), |
| createImageBitmap(source, { |
| resizeWidth: 40, resizeHeight: 40, resizeQuality: "pixelated"}), |
| createImageBitmap(source, 5, 5, 10, 10, { |
| resizeWidth: 20, resizeHeight: 20, resizeQuality: "high"}), |
| createImageBitmap(source, 5, 5, 10, 10, { |
| resizeWidth: 20, resizeHeight: 20, resizeQuality: "medium"}), |
| createImageBitmap(source, 5, 5, 10, 10, { |
| resizeWidth: 20, resizeHeight: 20, resizeQuality: "low"}), |
| createImageBitmap(source, 5, 5, 10, 10, { |
| resizeWidth: 20, resizeHeight: 20, resizeQuality: "pixelated"}), |
| ]).then(([noCropHigh, noCropMedium, noCropLow, noCropPixelated, cropHigh, |
| cropMedium, cropLow, cropPixelated]) => { |
| checkNoCrop(noCropHigh, colorInfo, sourceType); |
| checkNoCrop(noCropMedium, colorInfo, sourceType); |
| checkNoCrop(noCropLow, colorInfo, sourceType); |
| checkNoCrop(noCropPixelated, colorInfo, sourceType); |
| checkCrop(cropHigh, colorInfo, sourceType); |
| checkCrop(cropMedium, colorInfo, sourceType); |
| checkCrop(cropLow, colorInfo, sourceType); |
| checkCrop(cropPixelated, colorInfo, sourceType); |
| // Brute-force comparison among all bitmaps is too expensive. |
| // In case of SVG, resize quality does not affect the images, so all |
| // of them are the same and the tests fail. Since, we ignore this test |
| // set for SVG. |
| if (sourceType != 'svg') { |
| compareBitmaps(noCropHigh, noCropMedium); |
| compareBitmaps(noCropLow, noCropPixelated); |
| compareBitmaps(cropHigh, cropMedium); |
| compareBitmaps(cropLow, cropPixelated); |
| } |
| }); |
| } |
| |
| function testImageBitmapTransparent(source) |
| { |
| return testImageBitmap(source, 'transparent', 'general'); |
| } |
| |
| function testImageBitmapFromTransparentImage(source) |
| { |
| return testImageBitmap(source, 'transparent-image', 'general'); |
| } |
| |
| function testImageBitmapFromVideo(source) |
| { |
| return testImageBitmap(source, 'fullColor', 'video'); |
| } |
| |
| function testImageBitmapOpaque(source) |
| { |
| return testImageBitmap(source, 'opaque', 'general'); |
| } |
| |
| function testImageBitmapFromSVG(source) |
| { |
| return testImageBitmap(source, 'opaque', 'svg'); |
| } |
| |
| function initializeTestCanvas(canvasColorSpace, canvasPixelFormat) |
| { |
| var testCanvas = document.createElement("canvas"); |
| testCanvas.width = 20; |
| testCanvas.height = 20; |
| var testCtx = testCanvas.getContext('2d', |
| {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat}); |
| testCtx.fillStyle = "rgba(155, 27, 27, 1)"; |
| testCtx.fillRect(0, 0, 10, 10); |
| testCtx.fillStyle = "rgba(27, 155, 27, 1)"; |
| testCtx.fillRect(10, 0, 10, 10); |
| testCtx.fillStyle = "rgba(27, 27, 155, 1)"; |
| testCtx.fillRect(0, 10, 10, 10); |
| testCtx.fillStyle = "rgba(27, 27, 27, 1)"; |
| testCtx.fillRect(10, 10, 10, 10); |
| return testCanvas; |
| } |
| |
| function initializeTestCanvasTransparent(canvasColorSpace, canvasPixelFormat) |
| { |
| var testCanvas = document.createElement("canvas"); |
| testCanvas.width = 20; |
| testCanvas.height = 20; |
| var testCtx = testCanvas.getContext('2d', |
| {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat}); |
| testCtx.fillStyle = "rgba(155, 27, 27, 0.5)"; |
| testCtx.fillRect(0, 0, 10, 10); |
| testCtx.fillStyle = "rgba(27, 155, 27, 0.5)"; |
| testCtx.fillRect(10, 0, 10, 10); |
| testCtx.fillStyle = "rgba(27, 27, 155, 0.5)"; |
| testCtx.fillRect(0, 10, 10, 10); |
| testCtx.fillStyle = "rgba(27, 27, 27, 0.5)"; |
| testCtx.fillRect(10, 10, 10, 10); |
| return testCanvas; |
| } |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // HTMLImageElement - Opaque sRGB |
| // File formats: Bitmap, GIF, ICO, JPEG, PNG, WEBP |
| promise_test(function() { |
| return Promise.all(['bmp', 'gif', 'ico', 'jpg', 'png', 'webp'].map( |
| ext => new Promise((resolve,reject) => { |
| var image = new Image(); |
| image.onload = function() { |
| resolve(image); |
| } |
| image.src = 'resources/pattern-srgb.' + ext; |
| }).then(testImageBitmapOpaque))); |
| }, 'createImageBitmap in Rec2020 from an opaque sRGB HTMLImageElement (BMP, \ |
| GIF, ICO, JPG, PNG, WEBP) with resize.'); |
| |
| // HTMLImageElement - Transparent sRGB |
| // File formats: Bitmap, GIF, ICO, PNG, WEBP |
| promise_test(function() { |
| return Promise.all(['bmp', 'ico', 'png', 'webp'].map( |
| ext => new Promise((resolve,reject) => { |
| var image = new Image(); |
| image.onload = function() { |
| resolve(image); |
| } |
| image.src = 'resources/pattern-srgb-transparent.' + ext; |
| }).then(testImageBitmapFromTransparentImage))); |
| }, 'createImageBitmap in Rec2020 from a transparent sRGB HTMLImageElement (BMP, \ |
| ICO, PNG, WEBP) with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // SVG Image - sRGB |
| promise_test(function() { |
| return new Promise((resolve, reject) => { |
| var image = new Image(); |
| image.onload = function() { |
| resolve(image); |
| } |
| image.src = 'resources/pattern-srgb.svg' |
| }).then(testImageBitmapFromSVG); |
| }, 'createImageBitmap in Rec2020 from a sRGB SVG image with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // HTMLVideoElement - sRGB |
| promise_test(function() { |
| return new Promise((resolve, reject) => { |
| var video = document.createElement("video"); |
| video.oncanplaythrough = function() { |
| resolve(video); |
| } |
| video.preload = "auto"; |
| video.src = 'resources/pattern-srgb-fullcolor.ogv' |
| }).then(testImageBitmapFromVideo); |
| }, 'createImageBitmap in Rec2020 from a sRGB HTMLVideoElement with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // HTMLCanvasElement - Opaque sRGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('srgb', 'uint8'); |
| return testImageBitmapOpaque(testCanvas); |
| }, 'createImageBitmap in Rec2020 from an opaque sRGB HTMLCanvasElement with resize.'); |
| |
| // HTMLCanvasElement - Opaque e-sRGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('srgb', 'float16'); |
| return testImageBitmapOpaque(testCanvas); |
| }, 'createImageBitmap in Rec2020 from an opaque e-sRGB HTMLCanvasElement with resize.'); |
| |
| // HTMLCanvasElement - Opaque Rec2020 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('rec2020', 'float16'); |
| return testImageBitmapOpaque(testCanvas); |
| }, 'createImageBitmap in Rec2020 from an opaque Rec2020 HTMLCanvasElement with resize.'); |
| |
| // HTMLCanvasElement - Opaque P3 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('display-p3', 'float16'); |
| return testImageBitmapOpaque(testCanvas); |
| }, 'createImageBitmap in Rec2020 from an opaque P3 HTMLCanvasElement with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // HTMLCanvasElement - Transparent sRGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('srgb', 'uint8'); |
| return testImageBitmapTransparent(testCanvas); |
| }, 'createImageBitmap in Rec2020 from a transparent sRGB HTMLCanvasElement with resize.'); |
| |
| // HTMLCanvasElement - Transparent e-sRGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('srgb', 'float16'); |
| return testImageBitmapTransparent(testCanvas); |
| }, 'createImageBitmap in Rec2020 from a transparent e-sRGB HTMLCanvasElement with resize.'); |
| |
| // HTMLCanvasElement - Transparent Rec2020 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('rec2020', 'float16'); |
| return testImageBitmapTransparent(testCanvas); |
| }, 'createImageBitmap in Rec2020 from a transparent Rec2020 HTMLCanvasElement with resize.'); |
| |
| // HTMLCanvasElement - Transparent P3 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('display-p3', 'float16'); |
| return testImageBitmapTransparent(testCanvas); |
| }, 'createImageBitmap in Rec2020 from a transparent P3 HTMLCanvasElement with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // Blob from file - Opaque sRGB |
| promise_test(function() { |
| return new Promise((resolve, reject) => { |
| var xhr = new XMLHttpRequest(); |
| xhr.open("GET", 'resources/pattern-srgb.png'); |
| xhr.responseType = 'blob'; |
| xhr.send(); |
| xhr.onload = function() { |
| resolve(xhr.response); |
| }; |
| }).then(testImageBitmapOpaque); |
| }, 'createImageBitmap in Rec2020 from an opaque sRGB Blob with resize.'); |
| |
| // Blob from file - Transparent sRGB |
| promise_test(function() { |
| return new Promise((resolve, reject) => { |
| var xhr = new XMLHttpRequest(); |
| xhr.open("GET", 'resources/pattern-srgb-transparent.png'); |
| xhr.responseType = 'blob'; |
| xhr.send(); |
| xhr.onload = function() { |
| resolve(xhr.response); |
| }; |
| }).then(testImageBitmapFromTransparentImage); |
| }, 'createImageBitmap in Rec2020 from a transparent sRGB Blob with resize.'); |
| |
| // Color managed blob from canvas |
| function testCreateImageBitmapFromColorManagedBlob(colorSpace, pixelFormat, |
| isTransparent) { |
| let canvasPixelFormat = 'uint8'; |
| if (pixelFormat == 'uint16') |
| canvasPixelFormat = 'float16'; |
| var testCanvas; |
| if (isTransparent) |
| testCanvas = initializeTestCanvasTransparent('srgb', canvasPixelFormat); |
| else |
| testCanvas = initializeTestCanvas('srgb', canvasPixelFormat); |
| var encodeOptions = {}; |
| encodeOptions.quality = 1; |
| encodeOptions.type = 'image/png'; |
| encodeOptions.colorSpace = colorSpace; |
| encodeOptions.pixelFormat = pixelFormat; |
| |
| var t = async_test('createImageBitmap in Rec2020 from color managed Blob' + |
| ' with resize. blobColorSpace: ' + colorSpace + ', blobPixelFormat: ' + |
| pixelFormat + ', transparency: ' + isTransparent); |
| testCanvas.convertToBlob(encodeOptions).then( |
| t.step_func_done(function(blob) { |
| if (isTransparent) |
| testImageBitmapTransparent(blob); |
| else |
| testImageBitmapOpaque(blob); |
| })); |
| } |
| |
| function runAllCreateImageBitmapFromColorManagedBlobTests() { |
| var blobColorSpaces = ['srgb', 'rec2020', 'display-p3']; |
| var blobPixelFormats = ['uint8', 'uint16']; |
| var transparencies = [false, true]; |
| for (var i = 0; i < blobColorSpaces.length; i++) |
| for (var j = 0; j < blobPixelFormats.length; j++) |
| for (var k = 0; k < transparencies.length; k++) { |
| testCreateImageBitmapFromColorManagedBlob(blobColorSpaces[i], |
| blobPixelFormats[j], transparencies[k]); |
| } |
| } |
| |
| runAllCreateImageBitmapFromColorManagedBlobTests(); |
| var image_data_setting = {colorSpace: 'rec2020', storageFormat:'float32'} |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // ImageData - Opaque sRGB |
| promise_test(function() { |
| var canvas = initializeTestCanvas('srgb', 'uint8'); |
| var ctx = canvas.getContext('2d'); |
| var data = ctx.getImageData(0, 0, 20, 20, |
| {colorSpace: 'srgb', storageFormat:'uint8'}); |
| return testImageBitmapOpaque(data); |
| }, 'createImageBitmap in Rec2020 from an opaque sRGB ImageData with resize.'); |
| |
| // ImageData - Opaque e-sRGB |
| promise_test(function() { |
| var canvas = initializeTestCanvas('srgb', 'float16'); |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'srgb', pixelFormat:'float16'}); |
| var data = ctx.getImageData(0, 0, 20, 20, |
| {colorSpace: 'srgb', storageFormat:'float32'}); |
| return testImageBitmapOpaque(data); |
| }, 'createImageBitmap in Rec2020 from an opaque e-sRGB ImageData with resize.'); |
| |
| // ImageData - Opaque Rec2020 |
| promise_test(function() { |
| var canvas = initializeTestCanvas('rec2020', 'float16'); |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'rec2020', pixelFormat:'float16'}); |
| var data = ctx.getImageData(0, 0, 20, 20, |
| {colorSpace: 'rec2020', storageFormat:'float32'}); |
| return testImageBitmapOpaque(data); |
| }, 'createImageBitmap in Rec2020 from an opaque Rec2020 ImageData with resize.'); |
| |
| // ImageData - Opaque P3 |
| promise_test(function() { |
| var canvas = initializeTestCanvas('display-p3', 'float16'); |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'display-p3', pixelFormat:'float16'}); |
| var data = ctx.getImageData(0, 0, 20, 20, |
| {colorSpace: 'display-p3', storageFormat:'float32'}); |
| return testImageBitmapOpaque(data); |
| }, 'createImageBitmap in Rec2020 from an opaque P3 ImageData with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // ImageData - Transparent sRGB |
| promise_test(function() { |
| var canvas = initializeTestCanvasTransparent('srgb', 'uint8'); |
| var ctx = canvas.getContext('2d'); |
| var data = ctx.getImageData(0, 0, 20, 20, |
| {colorSpace: 'srgb', storageFormat:'uint8'}); |
| return testImageBitmapTransparent(data); |
| }, 'createImageBitmap in Rec2020 from a transparent sRGB ImageData with resize.'); |
| |
| // ImageData - Transparent e-sRGB |
| promise_test(function() { |
| var canvas = initializeTestCanvasTransparent('srgb', 'float16'); |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'srgb', pixelFormat:'float16'}); |
| var data = ctx.getImageData(0, 0, 20, 20, |
| {colorSpace: 'srgb', storageFormat:'float32'}); |
| return testImageBitmapTransparent(data); |
| }, 'createImageBitmap in Rec2020 from a transparent e-sRGB ImageData with resize.'); |
| |
| // ImageData - Transparent Rec2020 |
| promise_test(function() { |
| var canvas = initializeTestCanvasTransparent('rec2020', 'float16'); |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'rec2020', pixelFormat:'float16'}); |
| var data = ctx.getImageData(0, 0, 20, 20, |
| {colorSpace: 'rec2020', storageFormat:'float32'}); |
| return testImageBitmapTransparent(data); |
| }, 'createImageBitmap in Rec2020 from a transparent Rec2020 ImageData with resize.'); |
| |
| // ImageData - Transparent P3 |
| promise_test(function() { |
| var canvas = initializeTestCanvasTransparent('display-p3', 'float16'); |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'display-p3', pixelFormat:'float16'}); |
| var data = ctx.getImageData(0, 0, 20, 20, |
| {colorSpace: 'display-p3', storageFormat:'float32'}); |
| return testImageBitmapTransparent(data); |
| }, 'createImageBitmap in Rec2020 from a transparent P3 ImageData with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // ImageBitmap - Opaque sRGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('srgb', 'uint8'); |
| return createImageBitmap(testCanvas).then(testImageBitmapOpaque); |
| }, 'createImageBitmap in Rec2020 from an opaque sRGB ImageBitmap with resize.'); |
| |
| // ImageBitmap - Opaque Rec2020 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('rec2020', 'float16'); |
| return createImageBitmap(testCanvas).then(testImageBitmapOpaque); |
| }, 'createImageBitmap in Rec2020 from an opaque Rec2020 ImageBitmap with resize.'); |
| |
| // ImageBitmap - Opaque P3 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('display-p3', 'float16'); |
| return createImageBitmap(testCanvas).then(testImageBitmapOpaque); |
| }, 'createImageBitmap in Rec2020 from an opaque P3 ImageBitmap with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // ImageBitmap - Transparent sRGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('srgb', 'uint8'); |
| return createImageBitmap(testCanvas).then(testImageBitmapTransparent); |
| }, 'createImageBitmap in Rec2020 from a transparent sRGB ImageBitmap with resize.'); |
| |
| // ImageBitmap - Transparent Rec2020 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('rec2020', 'float16'); |
| return createImageBitmap(testCanvas).then(testImageBitmapTransparent); |
| }, 'createImageBitmap in Rec2020 from a transparent Rec2020 ImageBitmap with resize.'); |
| |
| // ImageBitmap - Transparent P3 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('display-p3', 'float16'); |
| return createImageBitmap(testCanvas).then(testImageBitmapTransparent); |
| }, 'createImageBitmap in Rec2020 from a transparent P3 ImageBitmap with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| function initializeOffscreenCanvas(canvasColorSpace, canvasPixelFormat) |
| { |
| var canvas = document.createElement("canvas"); |
| canvas.width = 20; |
| canvas.height = 20; |
| var offscreen = canvas.transferControlToOffscreen(); |
| var ctx = offscreen.getContext('2d', |
| {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat}); |
| ctx.fillStyle = "rgba(155, 27, 27, 1)"; |
| ctx.fillRect(0, 0, 10, 10); |
| ctx.fillStyle = "rgba(27, 155, 27, 1)"; |
| ctx.fillRect(10, 0, 10, 10); |
| ctx.fillStyle = "rgba(27, 27, 155, 1)"; |
| ctx.fillRect(0, 10, 10, 10); |
| ctx.fillStyle = "rgba(27, 27, 27, 1)"; |
| ctx.fillRect(10, 10, 10, 10); |
| return offscreen; |
| } |
| |
| //OffscreenCanvas - Opaque sRGB |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvas('srgb', 'uint8'); |
| return testImageBitmapOpaque(offscreen); |
| }, 'createImageBitmap in Rec2020 from an opaque sRGB OffscreenCanvas with resize.'); |
| |
| //OffscreenCanvas - Opaque e-sRGB |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvas('srgb', 'float16'); |
| return testImageBitmapOpaque(offscreen); |
| }, 'createImageBitmap in Rec2020 from an opaque e-sRGB OffscreenCanvas with resize.'); |
| |
| //OffscreenCanvas - Opaque Rec2020 |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvas('rec2020', 'float16'); |
| return testImageBitmapOpaque(offscreen); |
| }, 'createImageBitmap in Rec2020 from an opaque Rec2020 OffscreenCanvas with resize.'); |
| |
| //OffscreenCanvas - Opaque P3 |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvas('display-p3', 'float16'); |
| return testImageBitmapOpaque(offscreen); |
| }, 'createImageBitmap in Rec2020 from an opaque P3 OffscreenCanvas with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| function initializeOffscreenCanvasTransparent(canvasColorSpace, canvasPixelFormat) |
| { |
| var canvas = document.createElement("canvas"); |
| canvas.width = 20; |
| canvas.height = 20; |
| var offscreen = canvas.transferControlToOffscreen(); |
| var ctx = offscreen.getContext('2d', |
| {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat}); |
| ctx.fillStyle = "rgba(155, 27, 27, 0.5)"; |
| ctx.fillRect(0, 0, 10, 10); |
| ctx.fillStyle = "rgba(27, 155, 27, 0.5)"; |
| ctx.fillRect(10, 0, 10, 10); |
| ctx.fillStyle = "rgba(27, 27, 155, 0.5)"; |
| ctx.fillRect(0, 10, 10, 10); |
| ctx.fillStyle = "rgba(27, 27, 27, 0.5)"; |
| ctx.fillRect(10, 10, 10, 10); |
| return offscreen; |
| } |
| |
| //OffscreenCanvas - Transparent sRGB |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvasTransparent('srgb', 'uint8'); |
| return testImageBitmapTransparent(offscreen); |
| }, 'createImageBitmap in Rec2020 from a transparent sRGB OffscreenCanvas with resize.'); |
| |
| //OffscreenCanvas - Transparent e-sRGB |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvasTransparent('srgb', 'float16'); |
| return testImageBitmapTransparent(offscreen); |
| }, 'createImageBitmap in Rec2020 from a transparent e-sRGB OffscreenCanvas with resize.'); |
| |
| //OffscreenCanvas - Transparent Rec2020 |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvasTransparent('rec2020', 'float16'); |
| return testImageBitmapTransparent(offscreen); |
| }, 'createImageBitmap in Rec2020 from a transparent Rec2020 OffscreenCanvas with resize.'); |
| |
| //OffscreenCanvas - Transparent P3 |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvasTransparent('display-p3', 'float16'); |
| return testImageBitmapTransparent(offscreen); |
| }, 'createImageBitmap in Rec2020 from a transparent P3 OffscreenCanvas with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| </script> |
