<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
    <head>
        <canvas id="canvas1" width=320px height=240px></canvas>
        <video id="video" autoplay></video>
        <canvas id="canvas2" width=320px height=240px></canvas>
        <script src="../resources/testharness.js"></script>
        <script src="../resources/testharnessreport.js"></script>
        <script src ="routines.js"></script>
        <script>

var color = "green";

function printCanvas()
{
    var context = canvas1.getContext("2d");
    context.fillStyle = color;
    context.fillRect(0, 0, canvas1.width, canvas1.height);
}

function printRectangleEvery50ms()
{
    printCanvas();
    setTimeout(printRectangleEvery50ms, 50);
}

function testCanvas(testName, canvas, isSame, count)
{
    var array1 = canvas.getContext("2d").getImageData(20, 20, 60, 60).data;
    if (count === undefined)
        count = 0;
    canvas2.getContext("2d").drawImage(video, 0 ,0);
    array2 = canvas2.getContext("2d").getImageData(20, 20, 60, 60).data;
    var isEqual = true;
    var index = 0;
    for (index = 0; index < array1.length; ++index) {
        // Rough comparison since we are compressing data.
        // This test still catches errors since we are going from green to blue to red.
        if (Math.abs(array1[index] - array2[index]) > 100) {
            isEqual = false;
            continue;
        }
    }
    if (isEqual === isSame)
        return Promise.resolve();

    if (count === 20)
        return Promise.reject(testName + " failed, expected " + JSON.stringify(array1) + " but got " + JSON.stringify(array2));

    return waitFor(100).then(() => {
        return testCanvas(testName, canvas, isSame, ++count);
    });
}

promise_test((test) => {
    printRectangleEvery50ms();
    return new Promise((resolve, reject) => {
        createConnections((firstConnection) => {
            var stream = canvas1.captureStream();
            firstConnection.addTrack(stream.getVideoTracks()[0], stream);
        }, (secondConnection) => {
            secondConnection.ontrack = (trackEvent) => {
                assert_true(trackEvent.track instanceof MediaStreamTrack);
                assert_true(trackEvent.receiver instanceof RTCRtpReceiver);
                assert_true(Array.isArray(trackEvent.streams), "Array.isArray() should return true");
                assert_true(Object.isFrozen(trackEvent.streams), "Object.isFrozen() should return true");
                resolve(trackEvent.streams[0]);
            };
        });
        setTimeout(() => reject("Test timed out"), 5000);
    }).then((stream) => {
        video.srcObject = stream;
        return video.play();
    });
}, "Setting up the connection");

promise_test((test) => {
    return testCanvas("test 1", canvas1, true);
}, "Checking canvas is green");

promise_test((test) => {
    color = "red";
    printCanvas()
    return testCanvas("test 2", canvas1, true);
}, "Checking canvas is red");


promise_test((test) => {
    color = "green";
    printCanvas();
    return testCanvas("test 3", canvas1, true);
}, "Checking canvas is green again");

promise_test((test) => {
    canvas1.width = 640;
    canvas1.height = 480;
    printCanvas();
    return waitForVideoSize(video, 640, 480);
}, "Checking canvas size change");
        </script>
    </head>
</html>