Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!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, 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: 'from-image' };
return testDrawImageBitmap(img, [options], false);
});
}, `createImageBitmap from ${name} imageOrientation: "from-image", 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>