| <!DOCTYPE HTML> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script> |
| |
| function initializeBlankCanvas(canvasColorSpace, canvasPixelFormat) |
| { |
| var testCanvas = document.createElement("canvas"); |
| testCanvas.width = 4; |
| testCanvas.height = 4; |
| var testCtx = testCanvas.getContext('2d', |
| {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat}); |
| return testCtx; |
| } |
| |
| function initializeCanvas(canvasColorSpace, canvasPixelFormat) |
| { |
| var testCanvas = document.createElement("canvas"); |
| testCanvas.width = 4; |
| testCanvas.height = 4; |
| var testCtx = testCanvas.getContext('2d', |
| {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat}); |
| testCtx.fillStyle = "rgba(155, 27, 27, 1)"; |
| testCtx.fillRect(0, 0, 2, 2); |
| testCtx.fillStyle = "rgba(27, 155, 27, 1)"; |
| testCtx.fillRect(2, 0, 2, 2); |
| testCtx.fillStyle = "rgba(27, 27, 155, 1)"; |
| testCtx.fillRect(0, 2, 2, 2); |
| testCtx.fillStyle = "rgba(27, 27, 27, 1)"; |
| testCtx.fillRect(2, 2, 2, 2); |
| return testCtx; |
| } |
| |
| function initializeCanvasTransparent(canvasColorSpace, canvasPixelFormat) |
| { |
| var testCanvas = document.createElement("canvas"); |
| testCanvas.width = 4; |
| testCanvas.height = 4; |
| var testCtx = testCanvas.getContext('2d', |
| {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat}); |
| testCtx.fillStyle = "rgba(155, 27, 27, 0.5)"; |
| testCtx.fillRect(0, 0, 2, 2); |
| testCtx.fillStyle = "rgba(27, 155, 27, 0.5)"; |
| testCtx.fillRect(2, 0, 2, 2); |
| testCtx.fillStyle = "rgba(27, 27, 155, 0.5)"; |
| testCtx.fillRect(0, 2, 2, 2); |
| testCtx.fillStyle = "rgba(27, 27, 27, 0.5)"; |
| testCtx.fillRect(2, 2, 2, 2); |
| return testCtx; |
| } |
| |
| |
| function initializeOffscreenCanvas(canvasColorSpace, canvasPixelFormat) |
| { |
| var canvas = document.createElement("canvas"); |
| canvas.width = 4; |
| canvas.height = 4; |
| var offscreen = canvas.transferControlToOffscreen(); |
| var ctx = offscreen.getContext('2d', |
| {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat}); |
| ctx.fillStyle = "rgba(155, 27, 27, 1)"; |
| ctx.fillRect(0, 0, 2, 2); |
| ctx.fillStyle = "rgba(27, 155, 27, 1)"; |
| ctx.fillRect(2, 0, 2, 2); |
| ctx.fillStyle = "rgba(27, 27, 155, 1)"; |
| ctx.fillRect(0, 2, 2, 2); |
| ctx.fillStyle = "rgba(27, 27, 27, 1)"; |
| ctx.fillRect(2, 2, 2, 2); |
| return offscreen; |
| } |
| |
| function initializeOffscreenCanvasTransparent(canvasColorSpace, canvasPixelFormat) |
| { |
| var canvas = document.createElement("canvas"); |
| canvas.width = 4; |
| canvas.height = 4; |
| 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, 2, 2); |
| ctx.fillStyle = "rgba(27, 155, 27, 0.5)"; |
| ctx.fillRect(2, 0, 2, 2); |
| ctx.fillStyle = "rgba(27, 27, 155, 0.5)"; |
| ctx.fillRect(0, 2, 2, 2); |
| ctx.fillStyle = "rgba(27, 27, 27, 0.5)"; |
| ctx.fillRect(2, 2, 2, 2); |
| return offscreen; |
| } |
| |
| function testPixels(testCtx, refCtx, pixelFormat, isTrnasparent) |
| { |
| var actual = testCtx.getImageData(0, 0, 4, 4).dataUnion; |
| var expected = refCtx.getImageData(0, 0, 4, 4).dataUnion; |
| |
| var tolerance = 4; |
| if (pixelFormat === 'float16') |
| tolerance = 0.02; |
| if (isTrnasparent) |
| tolerance = tolerance * 2; |
| assert_array_approx_equals(actual, expected, tolerance); |
| } |
| |
| |
| function runDrawOffscreenCanvasTestOpaque(testScenario) { |
| var canvas_ctx_opaque = initializeCanvas( |
| testScenario.canvasColorSpace, testScenario.canvasPixelFormat); |
| |
| var canvas_ctx_blank = initializeBlankCanvas( |
| testScenario.canvasColorSpace, testScenario.canvasPixelFormat); |
| var offscreen_canvas_opaque = initializeOffscreenCanvas( |
| testScenario.imageColorSpace, testScenario.imagePixelFormat); |
| canvas_ctx_blank.drawImage(offscreen_canvas_opaque, 0, 0); |
| testPixels(canvas_ctx_blank, canvas_ctx_opaque, |
| testScenario.canvasPixelFormat, false); |
| } |
| |
| function runDrawOffscreenCanvasTestTransparent(testScenario) { |
| var canvas_ctx_transparent = initializeCanvasTransparent( |
| testScenario.canvasColorSpace, testScenario.canvasPixelFormat); |
| |
| var canvas_ctx_blank = initializeBlankCanvas( |
| testScenario.canvasColorSpace, testScenario.canvasPixelFormat); |
| var offscreen_canvas_transparent = initializeOffscreenCanvasTransparent( |
| testScenario.imageColorSpace, testScenario.imagePixelFormat); |
| canvas_ctx_blank.drawImage(offscreen_canvas_transparent, 0, 0); |
| testPixels(canvas_ctx_blank, canvas_ctx_transparent, |
| testScenario.canvasPixelFormat, true); |
| } |
| |
| function runAllTests() { |
| var canvasColorSpaces = ['srgb']; |
| var canvasPixelFormats = ['uint8', 'float16']; |
| |
| 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]; |
| for (var k = 0; k < canvasColorSpaces.length; k++) { |
| for (var m = 0; m < canvasPixelFormats.length; m++) { |
| var image_host_color_space = canvasColorSpaces[k]; |
| var image_host_pixel_format = canvasPixelFormats[m]; |
| |
| var testScenario = {}; |
| testScenario.canvasColorSpace = canvas_color_space; |
| testScenario.canvasPixelFormat = canvas_pixel_format; |
| testScenario.imageColorSpace = image_host_color_space; |
| testScenario.imagePixelFormat = image_host_pixel_format; |
| testScenarioSet.push(testScenario); |
| } |
| } |
| } |
| } |
| |
| for (var i = 0; i < testScenarioSet.length; i++) { |
| test(function(t) { |
| runDrawOffscreenCanvasTestOpaque(testScenarioSet[i]); |
| runDrawOffscreenCanvasTestTransparent(testScenarioSet[i]); |
| }, testScenarioToString(testScenarioSet[i])); |
| } |
| } |
| |
| function testScenarioToString(testScenario) { |
| var str = "Test drawing color managed OffscreenCanvas: " + |
| "Canvas color params: " + |
| testScenario.canvasColorSpace + ", " + |
| testScenario.canvasPixelFormat + |
| "; OffscreenCanvas color params: " + |
| testScenario.imageColorSpace + ", " + |
| testScenario.imagePixelFormat; |
| return str; |
| } |
| |
| runAllTests(); |
| </script> |