<!DOCTYPE html>
<html>
<head>
    <script src="../../resources/js-test-pre.js"></script>
    <script src="../../resources/platform-helper.js"></script>
</head>
<body onload="start()">
<p id="description"></p>
<div id="console"></div>
<video controls width="680" height="360"></video>
<video controls width="680" height="360"></video>
<canvas width="680" height="360"></canvas>
<script>
    let mediaStream;
    let videos;
    let buffer;
    let currentTest = 0;
    
    function checkPixels(x, y, test, expectedToBeTrue)
    {
        buffer = context.getImageData(x, y, 1, 1).data;
        if (expectedToBeTrue)
            shouldBeTrue(`${test.name}(buffer)`);
        else
            shouldBeFalse(`${test.name}(buffer)`);

        if (test(buffer) != expectedToBeTrue)
            debug(`Found: {${buffer[0]}, ${buffer[1]}, ${buffer[2]}, ${buffer[3]}}`);
    }

    function verifyFramesBeingDisplayed()
    {
        videos[currentTest].removeEventListener('playing', verifyFramesBeingDisplayed, false)

        canvas = document.querySelector('canvas');
        context = canvas.getContext('2d');
        
        context.clearRect(0, 0, canvas.width, canvas.height);
        let x = canvas.width * .035;
        let y = canvas.height * 0.6 + 2 + x;
        checkPixels(x, y, isPixelTransparent, true)
        
        evalAndLog(`context.drawImage(videos[${currentTest}], 0, 0, ${canvas.width}, ${canvas.height})`);
        checkPixels(x, y, isPixelTransparent, false)
        checkPixels(x, y, isPixelBlack, false)

        x = canvas.width * .05;
        y = canvas.height * .05;
        checkPixels(x, y, isPixelTransparent, false)
        checkPixels(x, y, currentTest ? isPixelGray : isPixelBlack, true)

        if (currentTest >= 1) {
            finishJSTest();
            return;
        }
        
        videos[currentTest].pause();
        ++currentTest;
        requestNextStream();
    }

    function setupVideoElement(stream)
    {
        mediaStream = stream;
        testPassed('mediaDevices.getUserMedia generated a stream successfully.');
        evalAndLog(`videos[${currentTest}].srcObject = mediaStream`);
    }

    function canplay()
    {
        videos[currentTest].removeEventListener('canplay', canplay, false)
        evalAndLog(`videos[${currentTest}].play()`);
    }
    
    function requestNextStream()
    {
        debug(`<br> === checking pixels from ${!currentTest ? "front" : "back"} camera ===`);
        let constraints = {video : !currentTest ? true : {facingMode: "environment"}};
        navigator.mediaDevices.getUserMedia(constraints).then(setupVideoElement);
    }
    
    function start()
    {
        description("Tests that the stream displays captured buffers to the video element.");
        if (window.testRunner)
            testRunner.setUserMediaPermission(true);

        videos = Array.from(document.getElementsByTagName('video'));
        videos.forEach((video) => {
            video.addEventListener('canplay', canplay, false);
            video.addEventListener('playing', verifyFramesBeingDisplayed, false);
        });
        requestNextStream();
    }

    window.jsTestIsAsync = true;
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>