diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage.html')
-rw-r--r-- | testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage.html | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage.html new file mode 100644 index 0000000000..5b5698813a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html> +<title>createImageBitmap + drawImage test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<script src="/common/media.js"></script> +<script src="common.sub.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body> +<script> +function testCanvasDisplayingPattern(canvas, width, height, sourceIsVideo) +{ + var tolerance = 3; + let topLeft = [255, 0, 0, 255]; + let topRight = [0, 255, 0, 255]; + let bottomLeft = [0, 0, 255, 255]; + let bottomRight = [0, 0, 0, 255]; + if (sourceIsVideo) { + // The source video uses colors in the Rec.601 color space whose + // values are close to full red, full green, full blue, and black, + // but when converted to sRGB, are somewhat different. + topLeft = [247, 37, 0, 255]; + topRight = [63, 251, 0, 255]; + bottomLeft = [28, 35, 255, 255]; + bottomRight = [5, 0, 2, 255]; + } + const check = (x, y, [r, g, b, a]) => + _assertPixelApprox(canvas, x,y, r,g,b,a, tolerance); + check(1 * width / 4, 1 * height / 4, topLeft); + check(3 * width / 4, 1 * height / 4, topRight); + check(1 * width / 4, 3 * height / 4, bottomLeft); + check(3 * width / 4, 3 * height / 4, bottomRight); +} + +function testDrawImageBitmap(source, args = [], { resizeWidth = 20, resizeHeight = 20 } = {}) +{ + let sourceIsVideo = source instanceof HTMLVideoElement; + var canvas = document.createElement("canvas"); + canvas.width = resizeWidth; + canvas.height = resizeHeight; + var ctx = canvas.getContext("2d"); + return createImageBitmap(source, ...args).then(imageBitmap => { + assert_equals(imageBitmap.width, resizeWidth); + assert_equals(imageBitmap.height, resizeHeight); + ctx.drawImage(imageBitmap, 0, 0); + testCanvasDisplayingPattern(canvas, resizeWidth, resizeHeight, sourceIsVideo); + }); +} + +for (let { name, factory } of imageSourceTypes) { + promise_test(function() { + return factory().then(function(img) { + return testDrawImageBitmap(img); + }); + }, `createImageBitmap from ${name}, and drawImage on the created ImageBitmap`); + + promise_test(function() { + return factory().then(function(img) { + const options = { resizeWidth: 10, resizeHeight: 10 }; + return testDrawImageBitmap(img, [options], options); + }); + }, `createImageBitmap from ${name} scaled down, and drawImage on the created ImageBitmap`); + + promise_test(function() { + return factory().then(function(img) { + const options = { resizeWidth: 40, resizeHeight: 40 }; + return testDrawImageBitmap(img, [options], options); + }); + }, `createImageBitmap from ${name} scaled up, and drawImage on the created ImageBitmap`); + + promise_test(function() { + return factory().then(function(img) { + const options = { resizeWidth: 10, resizeHeight: 40 }; + return testDrawImageBitmap(img, [options], options); + }); + }, `createImageBitmap from ${name} resized, and drawImage on the created ImageBitmap`); + + promise_test(function() { + return factory().then(function(img) { + return testDrawImageBitmap(img, [20, 20, -20, -20]); + }); + }, `createImageBitmap from ${name} with negative sw/sh, and drawImage on the created ImageBitmap`); +} +</script> +</body> +</html> |