<!-- webkit-test-runner [ dumpJSConsoleLogInStdErr=true ] -->
<div>
<canvas id="canvas1" width=100 height=100></canvas>
<canvas id="canvas2" width=100 height=100></canvas>
<br>
<video id="video" width=100 height=100 autoplay playsinline></video>
<br>
<image id='image'></image>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

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()
{
console.log("validateSnapshot-1 ");
    if (!window.testRunner)
        return true;
    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;
console.log("validateSnapshot0 ");

    const canvas = document.createElement("canvas");
    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;

console.log("validateSnapshot1 ");

    // We inspect the vertial line at pixel 50. We should get white, then green, then white, then green, then white.
    let i = 0;

console.log("validateSnapshot2 " + i);
    if (!isPixelWhite(i, 50, canvas, data))
        return false;
    while (isPixelWhite(++i, 50, canvas, data)) { };

console.log("validateSnapshot3 " + i);
    if (!isPixelGreen(i, 50, canvas, data))
        return false;
    while (isPixelGreen(++i, 50, canvas, data)) { };

console.log("validateSnapshot4 " + i);
    if (!isPixelWhite(i, 50, canvas, data))
        return false;
    while (isPixelWhite(++i, 50, canvas, data)) { };

console.log("validateSnapshot5 " + i);
    if (!isPixelGreen(i, 50, canvas, data))
        return false;
    while (isPixelGreen(++i, 50, canvas, data)) { };

console.log("validateSnapshot6 " + i);
    if (!isPixelWhite(i, 50, canvas, data))
        return false;

console.log("validateSnapshot7 " + i);
    return true;
}

async function test()
{
     const context1 = canvas1.getContext('2d');
     setInterval(() => {
        context1.fillStyle = "green";
        context1.fillRect(0, 0, 100, 100);
    }, 100);
    video.srcObject = canvas1.captureStream();
    await video.play();
    await new Promise(resolve => setTimeout(resolve, 500));
    video.style.display = 'none';
    await new Promise(resolve => setTimeout(resolve, 500));

    video.style.display = 'block';
    const context2 = canvas2.getContext('2d');
    setInterval(() => {
        context2.fillStyle = "green";
        context2.fillRect(0, 0, 100, 100);
    }, 100);
    video.srcObject = canvas2.captureStream();
    await video.play();

    let counter = 0;
    let result =  false;
    while (counter++ < 150 && !result) {
        await new Promise(resolve => video.requestVideoFrameCallback(resolve));
        try {
            result = await validateSnapshot();
        } catch (e) {
        }
    }
    image.parentNode.removeChild(image);
    if (window.testRunner)
        testRunner.notifyDone();
}
test();
</script>
