diff options
Diffstat (limited to 'testing/web-platform/tests/imagebitmap-renderingcontext')
15 files changed, 708 insertions, 0 deletions
diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/META.yml b/testing/web-platform/tests/imagebitmap-renderingcontext/META.yml new file mode 100644 index 0000000000..4239a85f5e --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/META.yml @@ -0,0 +1,6 @@ +spec: https://html.spec.whatwg.org/multipage/canvas.html#the-imagebitmap-rendering-context +suggested_reviewers: + - AmeliaBR + - annevk + - kenrussell + - fserb diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/bitmaprenderer-as-imagesource.html b/testing/web-platform/tests/imagebitmap-renderingcontext/bitmaprenderer-as-imagesource.html new file mode 100644 index 0000000000..21c5ea48ad --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/bitmaprenderer-as-imagesource.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> +<script> +var width = 10; +var height = 10; + +function testCanvas(ctx, x, y, r, g, b, a) +{ + var color = ctx.getImageData(x, y, 1, 1).data; + assert_array_equals(color, [r, g, b, a]); +} + +function consumeImageBitmap(image, t) +{ + var myCanvas = document.createElement('canvas'); + myCanvas.width = myCanvas.height = 20; + var myCtx = myCanvas.getContext('bitmaprenderer'); + myCtx.transferFromImageBitmap(image); + + createImageBitmap(myCanvas).then(t.step_func_done(function(imageBitmap) { + // Per spec, when transferFromImageBitmap happens, the transferred + // ImageBitmap (|image| here) must determine the intrinsic size of + // myCanvas, and hence myCanvas.width/height is ignored. Therefore, + // |imageBitmap| should have the same size as the |image|. + assert_equals(imageBitmap.width, width); + assert_equals(imageBitmap.height, height); + + var dstCanvas = document.createElement('canvas'); + dstCanvas.width = dstCanvas.height = 20; + var dstCtx = dstCanvas.getContext('2d'); + dstCtx.drawImage(myCanvas, 0, 0); + testCanvas(dstCtx, 5, 5, 0, 255, 0, 255); + testCanvas(dstCtx, 15, 15, 0, 0, 0, 0); + })); +} + +async_test(function(t) { + var canvas = document.createElement("canvas"); + canvas.width = width; + canvas.height = height; + var ctx = canvas.getContext('2d'); + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, width, height); + createImageBitmap(canvas).then(t.step_func(function(image) { + consumeImageBitmap(image, t); + })); +}, 'Test that createImageBitmap from a bitmaprenderer canvas produces correct result'); + +async_test(function(t) { + var canvas = document.createElement("canvas"); + canvas.width = width; + canvas.height = height; + var ctx = canvas.getContext('bitmaprenderer'); + createImageBitmap(canvas).then(t.step_func_done(function(image) { + assert_equals(image.width, width); + assert_equals(image.height, height); + + var dstCanvas = document.createElement('canvas'); + dstCanvas.width = width; + dstCanvas.height = height; + var dstCtx = dstCanvas.getContext('2d'); + dstCtx.drawImage(canvas, 0, 0); + testCanvas(dstCtx, 5, 5, 0, 0, 0, 0); + })); +}, 'Test that createImageBitmap on a bitmaprenderer canvas that never consumes any source produces correct result'); + + +async_test(function(t) { + var canvas = document.createElement("canvas"); + canvas.width = width; + canvas.height = height; + var ctx = canvas.getContext('bitmaprenderer'); + ctx.transferFromImageBitmap(null); + createImageBitmap(canvas).then(t.step_func_done(function(image) { + assert_equals(image.width, width); + assert_equals(image.height, height); + + var dstCanvas = document.createElement('canvas'); + dstCanvas.width = width; + dstCanvas.height = height; + var dstCtx = dstCanvas.getContext('2d'); + dstCtx.drawImage(canvas, 0, 0); + testCanvas(dstCtx, 5, 5, 0, 0, 0, 0); + })); +}, 'Test that createImageBitmap on a bitmaprenderer canvas that consumes null produces correct result'); +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/context-creation-offscreen-with-alpha.html b/testing/web-platform/tests/imagebitmap-renderingcontext/context-creation-offscreen-with-alpha.html new file mode 100644 index 0000000000..b565def964 --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/context-creation-offscreen-with-alpha.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> +<script> +var width = 10; +var height = 10; + +function testImageBitmap(image, opts, expectedR, expectedG, expectedB, expectedA) +{ + var dstCanvas = new OffscreenCanvas(width,height); + var dstCtx = dstCanvas.getContext('bitmaprenderer', opts); + dstCtx.transferFromImageBitmap(image); + + var myCanvas = document.createElement('canvas'); + myCanvas.width = width; + myCanvas.height = height; + var myCtx = myCanvas.getContext('2d'); + myCtx.drawImage(dstCanvas, 0, 0); + var color = myCtx.getImageData(5, 5, 1, 1).data; + assert_array_approx_equals(color, [expectedR, expectedG, expectedB, expectedA],1); +} + +promise_test(function() { + var srcCanvas = document.createElement('canvas'); + srcCanvas.width = width; + srcCanvas.height = height; + var ctx = srcCanvas.getContext('2d'); + ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; + ctx.fillRect(0, 0, width, height); + return createImageBitmap(srcCanvas).then(function(image) { + testImageBitmap(image, {alpha: false}, 0, 255, 0, 128); + }); +}, "Test that an ImageBitmapRenderingContext with alpha disabled makes the canvas opaque"); + +promise_test(function() { + var srcCanvas = document.createElement('canvas'); + srcCanvas.width = width; + srcCanvas.height = height; + var ctx = srcCanvas.getContext('2d'); + ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; + ctx.fillRect(0, 0, width, height); + return createImageBitmap(srcCanvas).then(function(image) { + testImageBitmap(image, {alpha: true}, 0, 255, 0, 128); + }); +}, "Test that an ImageBitmapRenderingContext with alpha enabled preserves the alpha"); + +promise_test(function() { + var srcCanvas = document.createElement('canvas'); + srcCanvas.width = width; + srcCanvas.height = height; + var ctx = srcCanvas.getContext('2d'); + ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; + ctx.fillRect(0, 0, width, height); + return createImageBitmap(srcCanvas).then(function(image) { + testImageBitmap(image, {}, 0, 255, 0, 128); + }); +}, "Test that the 'alpha' context creation attribute is true by default"); + +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/context-creation-offscreen.html b/testing/web-platform/tests/imagebitmap-renderingcontext/context-creation-offscreen.html new file mode 100644 index 0000000000..66d4cce420 --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/context-creation-offscreen.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#the-imagebitmap-rendering-context"> +<script> +test(function() { + var width = 10; + var height = 10; + var canvas = new OffscreenCanvas(width, height); + var ctx = canvas.getContext('bitmaprenderer'); + assert_true(ctx instanceof ImageBitmapRenderingContext); + assert_true("canvas" in ctx); + assert_equals(canvas, ctx.canvas); +}, "Test that canvas.getContext('bitmaprenderer') returns an instance of ImageBitmapRenderingContext and ctx.canvas on a ImageBitmapRenderingContext returns the original OffscreenCanvas"); + +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/context-creation-with-alpha.html b/testing/web-platform/tests/imagebitmap-renderingcontext/context-creation-with-alpha.html new file mode 100644 index 0000000000..2c8fa08b9d --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/context-creation-with-alpha.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> +<script> +var width = 10; +var height = 10; + +function testImageBitmap(image, opts, expectedR, expectedG, expectedB, expectedA) +{ + var dstCanvas = document.createElement('canvas'); + dstCanvas.width = width; + dstCanvas.height = height; + var dstCtx = dstCanvas.getContext('bitmaprenderer', opts); + dstCtx.transferFromImageBitmap(image); + + var myCanvas = document.createElement('canvas'); + myCanvas.width = width; + myCanvas.height = height; + var myCtx = myCanvas.getContext('2d'); + myCtx.drawImage(dstCanvas, 0, 0); + var color = myCtx.getImageData(5, 5, 1, 1).data; + assert_array_approx_equals(color, [expectedR, expectedG, expectedB, expectedA],1); +} + +promise_test(function() { + var srcCanvas = document.createElement('canvas'); + srcCanvas.width = width; + srcCanvas.height = height; + var ctx = srcCanvas.getContext('2d'); + ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; + ctx.fillRect(0, 0, width, height); + return createImageBitmap(srcCanvas).then(function(image) { + testImageBitmap(image, {alpha: false}, 0, 255, 0, 128); + }); +}, "Test that an ImageBitmapRenderingContext with alpha disabled makes the canvas opaque"); + +promise_test(function() { + var srcCanvas = document.createElement('canvas'); + srcCanvas.width = width; + srcCanvas.height = height; + var ctx = srcCanvas.getContext('2d'); + ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; + ctx.fillRect(0, 0, width, height); + return createImageBitmap(srcCanvas).then(function(image) { + testImageBitmap(image, {alpha: true}, 0, 255, 0, 128); + }); +}, "Test that an ImageBitmapRenderingContext with alpha enabled preserves the alpha"); + +promise_test(function() { + var srcCanvas = document.createElement('canvas'); + srcCanvas.width = width; + srcCanvas.height = height; + var ctx = srcCanvas.getContext('2d'); + ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; + ctx.fillRect(0, 0, width, height); + return createImageBitmap(srcCanvas).then(function(image) { + testImageBitmap(image, {}, 0, 255, 0, 128); + }); +}, "Test that the 'alpha' context creation attribute is true by default"); + +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/context-creation.html b/testing/web-platform/tests/imagebitmap-renderingcontext/context-creation.html new file mode 100644 index 0000000000..3daa397789 --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/context-creation.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> +<script> +var width = 10; +var height = 10; + +test(function() { + var canvas = document.createElement("canvas"); + canvas.width = width; + canvas.height = height; + var ctx = canvas.getContext('bitmaprenderer'); + assert_true(ctx instanceof ImageBitmapRenderingContext); +}, "Test that canvas.getContext('bitmaprenderer') returns an instance of ImageBitmapRenderingContext"); + +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/context-preserves-canvas.html b/testing/web-platform/tests/imagebitmap-renderingcontext/context-preserves-canvas.html new file mode 100644 index 0000000000..b0753a7348 --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/context-preserves-canvas.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#the-imagebitmap-rendering-context"> +<script> +test(function() { + var width = 10; + var height = 10; + var canvas = document.createElement("canvas"); + canvas.width = width; + canvas.height = height; + var ctx = canvas.getContext('bitmaprenderer'); + var dstCanvas = ctx.canvas; + assert_true("canvas" in ctx); + assert_equals(dstCanvas, ctx.canvas); + assert_equals(canvas, ctx.canvas); + assert_equals(dstCanvas.width, width); + assert_equals(dstCanvas.height, height); +}, "Test that ctx.canvas on a ImageBitmapRenderingContext returns the original canvas"); +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/toBlob-origin-clean-offscreen.sub.html b/testing/web-platform/tests/imagebitmap-renderingcontext/toBlob-origin-clean-offscreen.sub.html new file mode 100644 index 0000000000..0b00f92a95 --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/toBlob-origin-clean-offscreen.sub.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>convertToBlob, OffscreenCanvas: origin-clean flag</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> +<script> +const crossOriginImageUrl = "http://{{domains[www1]}}:{{ports[http][0]}}/images/red.png"; + +async_test(t => { + var img = new Image(); + // Use a cross-origin URL. + img.src = crossOriginImageUrl; + + img.onload = t.step_func(e => { + createImageBitmap(img, 0, 0, img.width, img.height) + .then(t.step_func(bitmap => { + var canvasBitmap = new OffscreenCanvas(img.width,img.height); + var contextBitmap = canvasBitmap.getContext("bitmaprenderer"); + contextBitmap.transferFromImageBitmap(bitmap); + promise_rejects_dom(t, 'SecurityError', + canvasBitmap.convertToBlob(), + "convertToBlob on a tainted OffscreenCanvas has to throw").then(t.step_func_done()); + })); + }); +}, "Test that call convertToBlob on a tainted OffscreenCanvas throws exception"); +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-ToBlob-offscreen.html b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-ToBlob-offscreen.html new file mode 100644 index 0000000000..81d0c90065 --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-ToBlob-offscreen.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> +<script> +var width = 10; +var height = 10; + +function testCanvas(ctx, r, g, b, a) +{ + var color = ctx.getImageData(5, 5, 1, 1).data; + assert_array_equals(color, [r, g, b, a]); +} + +promise_test(function() { + function transferFromImageBitmapToBlobOffscreen(greenImage) { + var bitmapCanvas = new OffscreenCanvas(width,height); + var bitmapCtx = bitmapCanvas.getContext('bitmaprenderer'); + bitmapCtx.transferFromImageBitmap(greenImage); + + return bitmapCanvas.convertToBlob(); + } + + function drawBlobToCanvas(blob) { + // Make sure the bitmap renderer canvas is filled correctly. + var pngImage = new Image(); + var myCanvasToTest = document.createElement('canvas'); + myCanvasToTest.width = width; + myCanvasToTest.height = height; + + // Wait for the blob img to load. + return new Promise(function(resolve) { + pngImage.src = URL.createObjectURL(blob); + pngImage.onload = function() { + var myCtxToTest = myCanvasToTest.getContext('2d'); + myCtxToTest.drawImage(pngImage, 0, 0); + resolve(myCtxToTest); + }; + }); + } + + var greenCanvas = document.createElement('canvas'); + greenCanvas.width = width; + greenCanvas.height = height; + var greenCtx = greenCanvas.getContext('2d'); + greenCtx.fillStyle = '#0f0'; + greenCtx.fillRect(0, 0, width, height); + + return createImageBitmap(greenCanvas).then( + greenImage => transferFromImageBitmapToBlobOffscreen(greenImage) + ).then( + blob => drawBlobToCanvas(blob) + ).then( + ctx => testCanvas(ctx, 0, 255, 0, 255) + ); +},'Test that convertToBlob works and produce the expected image'); + +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-ToBlob-transferControlToOffscreen.html b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-ToBlob-transferControlToOffscreen.html new file mode 100644 index 0000000000..e833b63fe4 --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-ToBlob-transferControlToOffscreen.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> +<script> +var width = 10; +var height = 10; + +function testCanvas(ctx, r, g, b, a) +{ + var color = ctx.getImageData(5, 5, 1, 1).data; + assert_array_equals(color, [r, g, b, a]); +} + +promise_test(function() { + function transferFromImageBitmapToBlobOffscreen(greenImage) { + var bitmapCanvas = document.createElement('canvas'); + bitmapCanvas.width = width; + bitmapCanvas.height = height; + var offscreenCanvas = bitmapCanvas.transferControlToOffscreen(); + var bitmapCtx = offscreenCanvas.getContext('bitmaprenderer'); + bitmapCtx.transferFromImageBitmap(greenImage); + + return offscreenCanvas.convertToBlob(); + } + + function drawBlobToCanvas(blob) { + // Make sure the bitmap renderer canvas is filled correctly. + var pngImage = new Image(); + var myCanvasToTest = document.createElement('canvas'); + myCanvasToTest.width = width; + myCanvasToTest.height = height; + + // Wait for the blob img to load. + return new Promise(function(resolve) { + pngImage.src = URL.createObjectURL(blob); + pngImage.onload = function() { + var myCtxToTest = myCanvasToTest.getContext('2d'); + myCtxToTest.drawImage(pngImage, 0, 0); + resolve(myCtxToTest); + }; + }); + } + + var greenCanvas = document.createElement('canvas'); + greenCanvas.width = width; + greenCanvas.height = height; + var greenCtx = greenCanvas.getContext('2d'); + greenCtx.fillStyle = '#0f0'; + greenCtx.fillRect(0, 0, width, height); + + return createImageBitmap(greenCanvas).then( + greenImage => transferFromImageBitmapToBlobOffscreen(greenImage) + ).then( + blob => drawBlobToCanvas(blob) + ).then( + ctx => testCanvas(ctx, 0, 255, 0, 255) + ); +},'Test that convertToBlob works and produce the expected image'); + +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-TransferToImageBitmap-offscreen.html b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-TransferToImageBitmap-offscreen.html new file mode 100644 index 0000000000..7e04da63dd --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-TransferToImageBitmap-offscreen.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> +<script> +var width = 10; +var height = 10; + +function testCanvas(bitmapCanvas, r, g, b, a) +{ + var myCanvas = document.createElement('canvas'); + myCanvas.width = width; + myCanvas.height = height; + var myCtx = myCanvas.getContext('2d'); + myCtx.drawImage(bitmapCanvas, 0, 0); + var color = myCtx.getImageData(5, 5, 1, 1).data; + assert_array_equals(color, [r, g, b, a]); +} + +promise_test(function() { + function testTransferFromImageBitmapNullability(greenImage) { + var bitmapCanvas = new OffscreenCanvas(width,height); + var bitmapCtx = bitmapCanvas.getContext('bitmaprenderer'); + bitmapCtx.transferFromImageBitmap(greenImage); + + // Make sure the bitmap renderer canvas is filled correctly. + var myCanvas = document.createElement('canvas'); + var myCtx = myCanvas.getContext('bitmaprenderer'); + myCtx.transferFromImageBitmap(bitmapCanvas.transferToImageBitmap()); + testCanvas(myCanvas, 0, 255, 0, 255); + + // Test that after transfering for second time to ImageBitmap produces + // a black bitmap of the same size + var myCanvas2 = document.createElement('canvas'); + var myCtx2 = myCanvas2.getContext('bitmaprenderer'); + myCtx2.transferFromImageBitmap(bitmapCanvas.transferToImageBitmap()); + testCanvas(myCanvas2, 0, 0, 0, 0); + } + + var greenCanvas = document.createElement('canvas'); + greenCanvas.width = width; + greenCanvas.height = height; + var greenCtx = greenCanvas.getContext('2d'); + greenCtx.fillStyle = '#0f0'; + greenCtx.fillRect(0, 0, width, height); + + return Promise.all([ + createImageBitmap(greenCanvas), + ]).then(([greenImage]) => { + testTransferFromImageBitmapNullability(greenImage); + }); +},'Test that transferToImageBitmap works and that resets the imagebitmap to black'); + +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-TransferToImageBitmap-transferControlToOffscreen.html b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-TransferToImageBitmap-transferControlToOffscreen.html new file mode 100644 index 0000000000..f1c95fa84e --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-TransferToImageBitmap-transferControlToOffscreen.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> +<script> +var width = 10; +var height = 10; + +function testCanvas(bitmapCanvas, r, g, b, a) +{ + var myCanvas = document.createElement('canvas'); + myCanvas.width = width; + myCanvas.height = height; + var myCtx = myCanvas.getContext('2d'); + myCtx.drawImage(bitmapCanvas, 0, 0); + var color = myCtx.getImageData(5, 5, 1, 1).data; + assert_array_equals(color, [r, g, b, a]); +} + +promise_test(function() { + function testTransferFromImageBitmapNullability(greenImage) { + var bitmapCanvas = document.createElement('canvas'); + bitmapCanvas.width = width; + bitmapCanvas.height = height; + var offscreenCanvas = bitmapCanvas.transferControlToOffscreen(); + var bitmapCtx = offscreenCanvas.getContext('bitmaprenderer'); + bitmapCtx.transferFromImageBitmap(greenImage); + + // Make sure the bitmap renderer canvas is filled correctly. + var myCanvas = document.createElement('canvas'); + var myCtx = myCanvas.getContext('bitmaprenderer'); + myCtx.transferFromImageBitmap(offscreenCanvas.transferToImageBitmap()); + testCanvas(myCanvas, 0, 255, 0, 255); + + // Test that after transfering for second time to ImageBitmap produces + // a black bitmap of the same size + var myCanvas2 = document.createElement('canvas'); + var myCtx2 = myCanvas2.getContext('bitmaprenderer'); + myCtx2.transferFromImageBitmap(offscreenCanvas.transferToImageBitmap()); + testCanvas(myCanvas2, 0, 0, 0, 0); + } + + var greenCanvas = document.createElement('canvas'); + greenCanvas.width = width; + greenCanvas.height = height; + var greenCtx = greenCanvas.getContext('2d'); + greenCtx.fillStyle = '#0f0'; + greenCtx.fillRect(0, 0, width, height); + + return Promise.all([ + createImageBitmap(greenCanvas), + ]).then(([greenImage]) => { + testTransferFromImageBitmapNullability(greenImage); + }); +},'Test that transferToImageBitmap works and that resets the imagebitmap to black'); + +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-detached.html b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-detached.html new file mode 100644 index 0000000000..40bf6eeb56 --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-detached.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> +<script> +var width = 10; +var height = 10; + +promise_test(function() { + function testException(image) { + var dstCanvas = document.createElement('canvas'); + dstCanvas.width = width; + dstCanvas.height = height; + var dstCtx = dstCanvas.getContext('bitmaprenderer'); + dstCtx.transferFromImageBitmap(image); + + // The image should be detached after transferFromImageBitmap. + assert_equals(image.width, 0); + assert_equals(image.height, 0); + assert_throws_dom("InvalidStateError", function() { dstCtx.transferFromImageBitmap(image); }); + } + + var srcCanvas = document.createElement('canvas'); + srcCanvas.width = width; + srcCanvas.height = height; + var ctx = srcCanvas.getContext('2d'); + ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; + ctx.fillRect(0, 0, width, height); + return createImageBitmap(srcCanvas).then(testException); +}, "Test transferFromImageBitmap(image) with a detached image should throw InvalidStateError"); + +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-null-offscreen.html b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-null-offscreen.html new file mode 100644 index 0000000000..e05a623a2f --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-null-offscreen.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> +<script> +var width = 10; +var height = 10; + +function testCanvas(bitmapCanvas, r, g, b, a) +{ + var myCanvas = document.createElement('canvas'); + myCanvas.width = width; + myCanvas.height = height; + var myCtx = myCanvas.getContext('2d'); + myCtx.drawImage(bitmapCanvas, 0, 0); + var color = myCtx.getImageData(5, 5, 1, 1).data; + assert_array_equals(color, [r, g, b, a]); +} + +promise_test(function() { + function testTransferFromImageBitmapNullability(greenImage, redImage) { + var bitmapCanvas = new OffscreenCanvas(width,height); + var bitmapCtx = bitmapCanvas.getContext('bitmaprenderer'); + bitmapCtx.transferFromImageBitmap(greenImage); + + // Make sure the bitmap renderer canvas is filled correctly. + testCanvas(bitmapCanvas, 0, 255, 0, 255); + + // Test if passing null resets the bitmap renderer canvas. + // Drawing the resetted canvas cannot change the destination canvas. + bitmapCtx.transferFromImageBitmap(null); + testCanvas(bitmapCanvas, 0, 0, 0, 0); + + // Test if we can redraw the bitmap canvas correctly after reset. + bitmapCtx.transferFromImageBitmap(redImage); + testCanvas(bitmapCanvas, 255, 0, 0, 255); + } + + var greenCanvas = document.createElement('canvas'); + greenCanvas.width = width; + greenCanvas.height = height; + var greenCtx = greenCanvas.getContext('2d'); + greenCtx.fillStyle = '#0f0'; + greenCtx.fillRect(0, 0, width, height); + + var redCanvas = document.createElement('canvas'); + redCanvas.width = width; + redCanvas.height = height; + var redCtx = redCanvas.getContext('2d'); + redCtx.fillStyle = '#f00'; + redCtx.fillRect(0, 0, width, height); + + return Promise.all([ + createImageBitmap(greenCanvas), + createImageBitmap(redCanvas), + ]).then(([greenImage, redImage]) => { + testTransferFromImageBitmapNullability(greenImage, redImage); + }); +},'Test that transferFromImageBitmap(null) discards the previously transferred image'); + +</script> diff --git a/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-null.html b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-null.html new file mode 100644 index 0000000000..ad7af401d7 --- /dev/null +++ b/testing/web-platform/tests/imagebitmap-renderingcontext/transferFromImageBitmap-null.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Canvas's ImageBitmapRenderingContext test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#the-imagebitmap-rendering-context"> +<script> +var width = 10; +var height = 10; + +function testCanvas(bitmapCanvas, r, g, b, a) +{ + var myCanvas = document.createElement('canvas'); + myCanvas.width = width; + myCanvas.height = height; + var myCtx = myCanvas.getContext('2d'); + myCtx.drawImage(bitmapCanvas, 0, 0); + var color = myCtx.getImageData(5, 5, 1, 1).data; + assert_array_equals(color, [r, g, b, a]); +} + +promise_test(function() { + function testTransferFromImageBitmapNullability(greenImage, redImage) { + var bitmapCanvas = document.createElement('canvas'); + bitmapCanvas.width = width; + bitmapCanvas.height = height; + var bitmapCtx = bitmapCanvas.getContext('bitmaprenderer'); + + // Make sure the bitmap renderer canvas is filled correctly. + bitmapCtx.transferFromImageBitmap(greenImage); + testCanvas(bitmapCanvas, 0, 255, 0, 255); + + // Test if passing null resets the bitmap renderer canvas. + // Drawing the resetted canvas cannot change the destination canvas. + bitmapCtx.transferFromImageBitmap(null); + testCanvas(bitmapCanvas, 0, 0, 0, 0); + + // Test if we can redraw the bitmap canvas correctly after reset. + bitmapCtx.transferFromImageBitmap(redImage); + testCanvas(bitmapCanvas, 255, 0, 0, 255); + } + + var greenCanvas = document.createElement('canvas'); + greenCanvas.width = width; + greenCanvas.height = height; + var greenCtx = greenCanvas.getContext('2d'); + greenCtx.fillStyle = '#0f0'; + greenCtx.fillRect(0, 0, width, height); + + var redCanvas = document.createElement('canvas'); + redCanvas.width = width; + redCanvas.height = height; + var redCtx = redCanvas.getContext('2d'); + redCtx.fillStyle = '#f00'; + redCtx.fillRect(0, 0, width, height); + + return Promise.all([ + createImageBitmap(greenCanvas), + createImageBitmap(redCanvas), + ]).then(([greenImage, redImage]) => { + testTransferFromImageBitmapNullability(greenImage, redImage); + }); +},'Test that transferFromImageBitmap(null) discards the previously transferred image'); + +</script> |