<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Testing video rotation</title>
    </head>
    <body>
        <video style="z-index: 1; position: absolute; top: 0px; left: 0px;" id="video" autoplay playsInline></video>
        <div style="z-index: 2; position: absolute; top: 2px; left: 0px; background-color:green; width:200px; height:396px"></div>
        <image id='image'></image>
        <canvas id='canvas'></canvas>
        <div style="z-index: 3" id="log"></div>
        <script>

function getPixel(x, y, canvas, data)
{
    const position = 4 * (x * canvas.width + y);
    return {r: data[position], g: data[position+1], b: data[position+2]};
}

function isPixelGreen(x, y, canvas, data)
{
   const pixel = getPixel(x, y, canvas, data);
   return pixel.r === 0 && pixel.g === 128 && pixel.b === 0;
}

function isPixelWhite(x, y, canvas, data)
{
   const pixel = getPixel(x, y, canvas, data);
   return pixel.r === 255 && pixel.g === 255 && pixel.b === 255;
}

function computeGreenRectangleHeight(canvas, data)
{
    let i = 100;
    let j = 100;
    while (++i < canvas.height && isPixelGreen(i, j, canvas, data)) { };
    return i;
}

async function validateSnapshot()
{
    const dataURL = await new Promise(resolve => testRunner.takeViewPortSnapshot(resolve));

    const loadPromise = new Promise((resolve, reject) => {
        image.onload = resolve;
        image.onerror = reject;
        setTimeout(() => reject("image load timed out"), 2000);
    });
    image.src = dataURL;
    await loadPromise;

    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext('2d').drawImage(image, 0, 0);
    const data = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height).data;

    image.src = '';
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

    // We expect to have a green horizontal line until getting some white.
    let j = 100;
    if (!isPixelGreen(300, j, canvas, data))
        return Promise.reject("first pixel is not green");

    while (isPixelGreen(300, ++j, canvas, data)) { };

    // We then expect a vertical line until the end of the canvas.
    j = j + 5;
    if (!isPixelWhite(300, j, canvas, data))
        return Promise.reject("did not find white pixel");

    let i = 100;
    while (++i < canvas.height && isPixelWhite(i, j, canvas, data)) { };

    return i >= computeGreenRectangleHeight(canvas, data);
}

onload = async () => {
    try {
        video.srcObject = await navigator.mediaDevices.getUserMedia({video: {width: 400, height: 200} });
        await video.play();

        if (!window.testRunner)
            return;

        testRunner.setMockCameraOrientation(90);
        let counter = 0;
        while (video.videoWidth !== 200 && ++counter < 100)
            await new Promise(resolve => setTimeout(resolve, 50));

        counter = 0;
        let isValidSnapshot = false;
        do {
            await new Promise(resolve => setTimeout(resolve, 50));
            isValidSnapshot = await validateSnapshot();
        } while (++counter < 50 && !isValidSnapshot)

        if (counter >= 50)
            log.innerHTML = "FAIL first part";
        else {
            testRunner.terminateGPUProcess();
            testRunner.setMockCameraOrientation(90);
            await new Promise(resolve => setTimeout(resolve, 1000));

            counter = 0;
            do {
                await new Promise(resolve => setTimeout(resolve, 50));
                isValidSnapshot = await validateSnapshot();
            } while (++counter < 50 && !isValidSnapshot)
        }

        log.innerHTML = counter < 50 ? "PASS" : "FAIL";
        if (counter < 50) {
           document.body.removeChild(image);
           document.body.removeChild(canvas);
        }
    } catch (e) {
        console.log(e);
    }

    if (window.testRunner)
        testRunner.notifyDone();
}
if (window.testRunner) {
    testRunner.dumpAsText(true);
    testRunner.waitUntilDone();
}
        </script>
    </body>
</html>