| <!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, flipped) |
| { |
| 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]; |
| } |
| if (flipped) { |
| [topLeft, bottomLeft] = [bottomLeft, topLeft]; |
| [topRight, bottomRight] = [bottomRight, topRight]; |
| } |
| const check = (x, y, [r, g, b, a]) => |
| _assertPixelApprox(canvas, x,y, r,g,b,a, `${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 = [], flipped, { 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, flipped); |
| }); |
| } |
| |
| for (let { name, factory } of imageSourceTypes) { |
| promise_test(function() { |
| return factory().then(function(img) { |
| const options = { imageOrientation: 'none' }; |
| return testDrawImageBitmap(img, [options], false); |
| }); |
| }, `createImageBitmap from ${name} imageOrientation: "none", and drawImage on the created ImageBitmap`); |
| |
| promise_test(function() { |
| return factory().then(function(img) { |
| const options = { imageOrientation: 'flipY' }; |
| return testDrawImageBitmap(img, [options], true); |
| }); |
| }, `createImageBitmap from ${name} imageOrientation: "flipY", and drawImage on the created ImageBitmap`); |
| |
| } |
| </script> |
| </body> |
| </html> |