createImageBitmap-flipY.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 20 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/imagebitmap/createImageBitmap-flipY.html - WPT Dashboard Interop Dashboard

<!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>