| <!DOCTYPE HTML> |
| <script src="../../../../../resources/testharness.js"></script> |
| <script src="../../../../../resources/testharnessreport.js"></script> |
| <script> |
| |
| // The reference values are generated by calling SkImage::makeColorSpace() |
| // in a Skia fiddle as this is the API used in ImageBitmap for color conversion. |
| // SkColorSpaceXform() may generate slightly different results. |
| // Please see: https://fiddle.skia.org/c/94578944d9d52c2b4c2cadda88a4e204 |
| |
| var linearRgbRed = [1, 0, 0, 1]; // SRGB(255,0,0,255) |
| var linearRgbGreen = [0, 1, 0, 1]; // SRGB(0,255,0,255) |
| var linearRgbBlue = [0, 0, 1, 1]; // SRGB(0,0,255,255) |
| var linearRgbBlack = [0, 0, 0, 1]; // SRGB(0,0,0,255) |
| |
| // SRGB(155,27,27,255) |
| var linearRgbOpaqueRed = [0.329346, 0.011765, 0.011765, 1]; |
| // SRGB(27,155,27,255) |
| var linearRgbOpaqueGreen = [0.011765, 0.329346, 0.011765, 1]; |
| // SRGB(27,27,155,255) |
| var linearRgbOpaqueBlue = [0.011765, 0.011765, 0.329346, 1]; |
| // SRGB(27,27,27,255) |
| var linearRgbOpaqueBlack = [0.011765, 0.011765, 0.011765, 1]; |
| |
| // SRGB(155,27,27,128) |
| var linearRgbTransparentRed = [0.329346, 0.011765, 0.011765, 0.501953]; |
| // SRGB(27,155,27,128) |
| var linearRgbTransparentGreen = [0.011765, 0.329346, 0.011765, 0.501953]; |
| // SRGB(27,27,155,128) |
| var linearRgbTransparentBlue = [0.011765, 0.011765, 0.329346, 0.501953]; |
| // SRGB(27,27,27,128) |
| var linearRgbTransparentBlack = [0.011765, 0.011765, 0.011765, 0.501953]; |
| |
| function testPixels(ctx, tests, sourceType) |
| { |
| var actual, expected, tolerance = 0.01; |
| 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).dataUnion; |
| expected = tests[i][2]; |
| assert_true(actual.length === expected.length); |
| for (var i = 0; i < actual.length; i++) |
| assert_approx_equals(actual[i], expected[i], 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: 'srgb', pixelFormat:'float16'}); |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| ctx.drawImage(imageBitmap, 0, 0); |
| var tests; |
| if (colorInfo == 'fullColor') |
| tests = [[0, 0, linearRgbRed, "This pixel should be linear RGB red."], |
| [39, 0, linearRgbGreen, "This pixel should be linear RGB green."], |
| [0, 39, linearRgbBlue, "This pixel should be linear RGB blue."], |
| [39, 39, linearRgbBlack, "This pixel should be linear RGB black."], |
| [41, 41, linearRgbBlack, "This pixel should be linear RGB black."]]; |
| else if (colorInfo == 'opaque') |
| tests = [[0, 0, linearRgbOpaqueRed, |
| "This pixel should be linear RGB like red."], |
| [39, 0, linearRgbOpaqueGreen, |
| "This pixel should be linear RGB like green."], |
| [0, 39, linearRgbOpaqueBlue, |
| "This pixel should be linear RGB like blue."], |
| [39, 39, linearRgbOpaqueBlack, |
| "This pixel should be linear RGB like black."], |
| [41, 41, linearRgbBlack, |
| "This pixel should be linear RGB black."]]; |
| else if (colorInfo == 'transparent') |
| tests = [[0, 0, linearRgbTransparentRed, |
| "This pixel should be linear RGB transparent red."], |
| [39, 0, linearRgbTransparentGreen, |
| "This pixel should be linear RGB transparent green."], |
| [0, 39, linearRgbTransparentBlue, |
| "This pixel should be linear RGB transparent blue."], |
| [39, 39, linearRgbTransparentBlack, |
| "This pixel should be linear RGB transparent black."], |
| [41, 41, linearRgbBlack, "This pixel should be linear RGB black."]]; |
| testPixels(ctx, tests, sourceType); |
| } |
| |
| function checkCrop(imageBitmap, colorInfo, sourceType) |
| { |
| var canvas = document.createElement('canvas'); |
| canvas.width = 50; |
| canvas.height = 50; |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'srgb', pixelFormat:'float16'}); |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| ctx.drawImage(imageBitmap, 0, 0); |
| var tests; |
| if (colorInfo === 'fullColor') |
| tests = [[0, 0, linearRgbRed, "This pixel should be linear RGB red."], |
| [19, 0, linearRgbGreen, "This pixel should be linear RGB green."], |
| [0, 19, linearRgbBlue, "This pixel should be linear RGB blue."], |
| [19, 19, linearRgbBlack, "This pixel should be linear RGB black."], |
| [21, 21, linearRgbBlack, "This pixel should be linear RGB black."]]; |
| else if (colorInfo === 'opaque') |
| tests = [[0, 0, linearRgbOpaqueRed, |
| "This pixel should be linear RGB like red."], |
| [19, 0, linearRgbOpaqueGreen, |
| "This pixel should be linear RGB like green."], |
| [0, 19, linearRgbOpaqueBlue, |
| "This pixel should be linear RGB like blue."], |
| [19, 19, linearRgbOpaqueBlack, |
| "This pixel should be linear RGB like black."], |
| [21, 21, linearRgbBlack, "This pixel should be linear RGB black."]]; |
| else if (colorInfo === 'transparent') |
| tests = [[0, 0, linearRgbTransparentRed, |
| "This pixel should be linear RGB transparent red."], |
| [19, 0, linearRgbTransparentGreen, |
| "This pixel should be linear RGB transparent green."], |
| [0, 19, linearRgbTransparentBlue, |
| "This pixel should be linear RGB transparent blue."], |
| [19, 19, linearRgbTransparentBlack, |
| "This pixel should be linear RGB transparent black."], |
| [21, 21, linearRgbBlack, "This pixel should be linear RGB black."]]; |
| testPixels(ctx, tests, sourceType); |
| } |
| |
| |
| 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: 'srgb', pixelFormat:'float16'}); |
| var ctx2 = canvas2.getContext('2d', |
| {colorSpace: 'srgb', pixelFormat:'float16'}); |
| 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).dataUnion; |
| var data2 = ctx2.getImageData(0, 0, 50, 50).dataUnion; |
| 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, {colorSpaceConversion: "linear-rgb", |
| resizeWidth: 40, resizeHeight: 40, resizeQuality: "high"}), |
| createImageBitmap(source, {colorSpaceConversion: "linear-rgb", |
| resizeWidth: 40, resizeHeight: 40, resizeQuality: "medium"}), |
| createImageBitmap(source, {colorSpaceConversion: "linear-rgb", |
| resizeWidth: 40, resizeHeight: 40, resizeQuality: "low"}), |
| createImageBitmap(source, {colorSpaceConversion: "linear-rgb", |
| resizeWidth: 40, resizeHeight: 40, resizeQuality: "pixelated"}), |
| createImageBitmap(source, 5, 5, 10, 10, { |
| colorSpaceConversion: "linear-rgb", |
| resizeWidth: 20, resizeHeight: 20, resizeQuality: "high"}), |
| createImageBitmap(source, 5, 5, 10, 10, { |
| colorSpaceConversion: "linear-rgb", |
| resizeWidth: 20, resizeHeight: 20, resizeQuality: "medium"}), |
| createImageBitmap(source, 5, 5, 10, 10, { |
| colorSpaceConversion: "linear-rgb", |
| resizeWidth: 20, resizeHeight: 20, resizeQuality: "low"}), |
| createImageBitmap(source, 5, 5, 10, 10, { |
| colorSpaceConversion: "linear-rgb", |
| 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 testImageBitmapVideoSource(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 linear RGB 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(testImageBitmapTransparent))); |
| }, 'createImageBitmap in linear RGB from a transparent SRGB HTMLImageElement \ |
| (BMP, ICO, PNG, WEBP) with resize.'); |
| |
| // TODO(zakerinasab): crbug.com/668547 |
| // Add at least two more test scenarios for loading the image element from P3 |
| // and Rec2020 images. |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // 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 linear RGB from a SRGB SVG image with resize.'); |
| |
| // TODO(zakerinasab): crbug.com/668547 |
| // Add at least two more tests for loading the image element from P3 and Rec2020 |
| // SVG images. |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // HTMLVideoElement - SRGB |
| promise_test(function() { |
| return new Promise((resolve, reject) => { |
| var video = document.createElement("video"); |
| video.oncanplaythrough = function() { |
| resolve(video); |
| } |
| video.src = 'resources/pattern-srgb-fullcolor.ogv' |
| }).then(testImageBitmapVideoSource); |
| }, 'createImageBitmap in linear RGB from a SRGB HTMLVideoElement with resize.'); |
| |
| // TODO(zakerinasab): crbug.com/668547 |
| // Add at least two more tests for loading the video element from P3 and Rec2020 |
| // videos. |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // HTMLCanvasElement - Opaque SRGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('srgb', '8-8-8-8'); |
| return testImageBitmapOpaque(testCanvas); |
| }, 'createImageBitmap in linear RGB from an opaque SRGB HTMLCanvasElement with resize.'); |
| |
| // HTMLCanvasElement - Opaque Linear RGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('srgb', 'float16'); |
| return testImageBitmapOpaque(testCanvas); |
| }, 'createImageBitmap in linear RGB from an opaque linear RGB HTMLCanvasElement with resize.'); |
| |
| // HTMLCanvasElement - Opaque Rec2020 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('rec2020', 'float16'); |
| return testImageBitmapOpaque(testCanvas); |
| }, 'createImageBitmap in linear RGB from an opaque Rec2020 HTMLCanvasElement with resize.'); |
| |
| // HTMLCanvasElement - Opaque P3 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('p3', 'float16'); |
| return testImageBitmapOpaque(testCanvas); |
| }, 'createImageBitmap in linear RGB from an opaque P3 HTMLCanvasElement with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // HTMLCanvasElement - Transparent SRGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('srgb', '8-8-8-8'); |
| return testImageBitmapTransparent(testCanvas); |
| }, 'createImageBitmap in linear RGB from a transparent SRGB HTMLCanvasElement with resize.'); |
| |
| // HTMLCanvasElement - Transparent Linear RGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('srgb', 'float16'); |
| return testImageBitmapTransparent(testCanvas); |
| }, 'createImageBitmap in linear RGB from a transparent linear RGB HTMLCanvasElement with resize.'); |
| |
| // HTMLCanvasElement - Transparent Rec2020 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('rec2020', 'float16'); |
| return testImageBitmapTransparent(testCanvas); |
| }, 'createImageBitmap in linear RGB from a transparent Rec2020 HTMLCanvasElement with resize.'); |
| |
| // HTMLCanvasElement - Transparent P3 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('p3', 'float16'); |
| return testImageBitmapTransparent(testCanvas); |
| }, 'createImageBitmap in linear RGB from a transparent P3 HTMLCanvasElement with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // Blob - 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 linear RGB from an opaque SRGB Blob with resize.'); |
| |
| // Blob - 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(testImageBitmapTransparent); |
| }, 'createImageBitmap in linear RGB from a transparent SRGB Blob with resize.'); |
| |
| // TODO(zakerinasab): crbug.com/668547 |
| // Add at least two more tests for loading the blob from P3 and Rec2020 images. |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // ImageData - Opaque SRGB |
| promise_test(function() { |
| var canvas = initializeTestCanvas('srgb', '8-8-8-8'); |
| var ctx = canvas.getContext('2d'); |
| var data = ctx.getImageData(0, 0, 20, 20); |
| return testImageBitmapOpaque(data); |
| }, 'createImageBitmap in linear RGB from an opaque SRGB ImageData with resize.'); |
| |
| // ImageData - Opaque Linear RGB |
| 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); |
| return testImageBitmapOpaque(data); |
| }, 'createImageBitmap in linear RGB from an opaque Linear RGB 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); |
| return testImageBitmapOpaque(data); |
| }, 'createImageBitmap in linear RGB from an opaque Rec2020 ImageData with resize.'); |
| |
| // ImageData - Opaque P3 |
| promise_test(function() { |
| var canvas = initializeTestCanvas('p3', 'float16'); |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'p3', pixelFormat:'float16'}); |
| var data = ctx.getImageData(0, 0, 20, 20); |
| return testImageBitmapOpaque(data); |
| }, 'createImageBitmap in linear RGB from an opaque P3 ImageData with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // ImageData - Transparent SRGB |
| promise_test(function() { |
| var canvas = initializeTestCanvasTransparent('srgb', '8-8-8-8'); |
| var ctx = canvas.getContext('2d'); |
| var data = ctx.getImageData(0, 0, 20, 20); |
| return testImageBitmapTransparent(data); |
| }, 'createImageBitmap in linear RGB from a transparent SRGB ImageData with resize.'); |
| |
| // ImageData - Transparent Linear RGB |
| 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); |
| return testImageBitmapTransparent(data); |
| }, 'createImageBitmap in linear RGB from a transparent Linear RGB 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); |
| return testImageBitmapTransparent(data); |
| }, 'createImageBitmap in linear RGB from a transparent Rec2020 ImageData with resize.'); |
| |
| // ImageData - Transparent P3 |
| promise_test(function() { |
| var canvas = initializeTestCanvasTransparent('p3', 'float16'); |
| var ctx = canvas.getContext('2d', |
| {colorSpace: 'p3', pixelFormat:'float16'}); |
| var data = ctx.getImageData(0, 0, 20, 20); |
| return testImageBitmapTransparent(data); |
| }, 'createImageBitmap in linear RGB from a transparent P3 ImageData with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // ImageBitmap - Opaque SRGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('srgb', '8-8-8-8'); |
| return createImageBitmap(testCanvas).then(testImageBitmapOpaque); |
| }, 'createImageBitmap in linear RGB from an opaque SRGB ImageBitmap with resize.'); |
| |
| // ImageBitmap - Opaque Linear RGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('srgb', 'float16'); |
| return createImageBitmap(testCanvas, {colorSpaceConversion: "linear-rgb"} |
| ).then(testImageBitmapOpaque); |
| }, 'createImageBitmap in linear RGB from an opaque Linear RGB ImageBitmap with resize.'); |
| |
| // ImageBitmap - Opaque Rec2020 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('rec2020', 'float16'); |
| return createImageBitmap(testCanvas, {colorSpaceConversion: "rec2020"} |
| ).then(testImageBitmapOpaque); |
| }, 'createImageBitmap in linear RGB from an opaque Rec2020 ImageBitmap with resize.'); |
| |
| // ImageBitmap - Opaque P3 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvas('p3', 'float16'); |
| return createImageBitmap(testCanvas, {colorSpaceConversion: "p3"} |
| ).then(testImageBitmapOpaque); |
| }, 'createImageBitmap in linear RGB from an opaque P3 ImageBitmap with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| // ImageBitmap - Transparent SRGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('srgb', '8-8-8-8'); |
| return createImageBitmap(testCanvas).then(testImageBitmapTransparent); |
| }, 'createImageBitmap in linear RGB from a transparent SRGB ImageBitmap with resize.'); |
| |
| // ImageBitmap - Transparent Linear RGB |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('srgb', 'float16'); |
| return createImageBitmap(testCanvas, {colorSpaceConversion: "linear-rgb"} |
| ).then(testImageBitmapTransparent); |
| }, 'createImageBitmap in linear RGB from a transparent Linear RGB ImageBitmap with resize.'); |
| |
| // ImageBitmap - Transparent Rec2020 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('rec2020', 'float16'); |
| return createImageBitmap(testCanvas, {colorSpaceConversion: "rec2020"} |
| ).then(testImageBitmapTransparent); |
| }, 'createImageBitmap in linear RGB from a transparent Rec2020 ImageBitmap with resize.'); |
| |
| // ImageBitmap - Transparent P3 |
| promise_test(function() { |
| var testCanvas = initializeTestCanvasTransparent('p3', 'float16'); |
| return createImageBitmap(testCanvas, {colorSpaceConversion: "p3"} |
| ).then(testImageBitmapTransparent); |
| }, 'createImageBitmap in linear RGB 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', '8-8-8-8'); |
| return testImageBitmapOpaque(offscreen); |
| }, 'createImageBitmap in linear RGB from an opaque SRGB OffscreenCanvas with resize.'); |
| |
| //OffscreenCanvas - Opaque Linear RGB |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvas('srgb', 'float16'); |
| return testImageBitmapOpaque(offscreen); |
| }, 'createImageBitmap in linear RGB from an opaque linear RGB OffscreenCanvas with resize.'); |
| |
| //OffscreenCanvas - Opaque Rec2020 |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvas('rec2020', 'float16'); |
| return testImageBitmapOpaque(offscreen); |
| }, 'createImageBitmap in linear RGB from an opaque Rec2020 OffscreenCanvas with resize.'); |
| |
| //OffscreenCanvas - Opaque P3 |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvas('p3', 'float16'); |
| return testImageBitmapOpaque(offscreen); |
| }, 'createImageBitmap in linear RGB 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', '8-8-8-8'); |
| return testImageBitmapTransparent(offscreen); |
| }, 'createImageBitmap in linear RGB from a transparent SRGB OffscreenCanvas with resize.'); |
| |
| //OffscreenCanvas - Transparent Linear RGB |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvasTransparent('srgb', 'float16'); |
| return testImageBitmapTransparent(offscreen); |
| }, 'createImageBitmap in linear RGB from a transparent linear RGB OffscreenCanvas with resize.'); |
| |
| //OffscreenCanvas - Transparent Rec2020 |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvasTransparent('rec2020', 'float16'); |
| return testImageBitmapTransparent(offscreen); |
| }, 'createImageBitmap in linear RGB from a transparent Rec2020 OffscreenCanvas with resize.'); |
| |
| //OffscreenCanvas - Transparent P3 |
| promise_test(function() { |
| var offscreen = initializeOffscreenCanvasTransparent('p3', 'float16'); |
| return testImageBitmapTransparent(offscreen); |
| }, 'createImageBitmap in linear RGB from a transparent P3 OffscreenCanvas with resize.'); |
| |
| //////////////////////////////////////////////////////////////////////////////// |
| |
| </script> |
