<!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: 5px; left: 0px; background-color:green; width:200px; height:390px"></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;
}

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;

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

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

    // We then expect a vertical line until the end of the canvas.
    j = j + 5;
    if (!isPixelWhite(100, 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 === canvas.height;
}

async function waitFor(element, type) {
    return new Promise(resolve => {
        element.addEventListener(type, event => {
            resolve(event);
        }, { once: true });
    });
}

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));

        await waitFor(video, 'timeupdate');
        counter = 0;
        let isValidSnapshot = false;
        do {
            await new Promise(resolve => setTimeout(resolve, 50));
            try {
                isValidSnapshot = await validateSnapshot();
            } catch (e) { }
        } while (++counter < 100 && !isValidSnapshot)

        log.innerHTML = counter < 100 ? "PASS" : "FAIL";

        if (counter < 100)
            document.body.removeChild(image);
    } catch (e) {
        console.log(e);
    }

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