<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
    <head>
        <script src="../../resources/js-test-pre.js"></script>
        <script>
            var video;
            var mediaStream;

            function logEvent(element, eventName, func)
            {
                function _eventCallback(evt)
                {
                    if (window.wasFinishJSTestCalled)
                        return;

                    debug(`Event <em>'${evt.type}'</em>`);
                    if (func)
                        func(evt);
                }
                element.addEventListener(eventName, _eventCallback, true);
            }

            function recheckVideoElementAfterStop()
            {
                debug("<br>**** re-check states now that the video stream has ended ****");
                shouldBe('video.ended', 'true');
                shouldBe('video.videoWidth', '0');
                shouldBe('video.videoHeight', '0');

                debug("");
                shouldBe('video.videoTracks.length', '1');
                shouldBe('video.videoTracks.selectedIndex', '-1');
                shouldBe('video.videoTracks[0].selected', 'false');

                debug("");
                shouldBe('mediaStream.getVideoTracks()[0].enabled', "true");
                shouldBeEqualToString('mediaStream.getVideoTracks()[0].readyState', "ended");

                debug("");
                finishJSTest();
            }

            function recheckVideoElementAfterEnabledChange()
            {
                debug("<br>**** re-check states now that the video stream has been disabled ****");
                shouldBe('mediaStream.getVideoTracks()[0].enabled', 'false');
                shouldBe('video.videoWidth', 'mediaStream.getVideoTracks()[0].getSettings().width');
                shouldBe('video.videoHeight', 'mediaStream.getVideoTracks()[0].getSettings().height');

                debug("<br>**** stop MediaStream tracks ****");
                evalAndLog('mediaStream.getVideoTracks()[0].enabled = true');
                evalAndLog("mediaStream.getVideoTracks()[0].stop()");
                evalAndLog("mediaStream.getAudioTracks()[0].stop()");
                debug("");
            }

            function checkVideoElement()
            {
                evalAndLog("video.pause()");

                debug("<br>**** check states with live video stream track ****");
                shouldBe('video.ended', 'false');
                shouldBe('video.videoWidth', 'mediaStream.getVideoTracks()[0].getSettings().width');
                shouldBe('video.videoHeight', 'mediaStream.getVideoTracks()[0].getSettings().height');

                debug("");
                shouldBe('video.videoTracks.length', '1');
                shouldBe('video.videoTracks.selectedIndex', '0');
                shouldBe('video.videoTracks[0].id', 'mediaStream.getVideoTracks()[0].id');
                shouldBe('video.videoTracks[0].selected', 'true');
                shouldBe('mediaStream.getVideoTracks()[0].enabled', 'true');

                debug("");
                shouldBe('mediaStream.getVideoTracks()[0].enabled', "true");
                shouldBeEqualToString('mediaStream.getVideoTracks()[0].readyState', "live");

                debug("<br>**** disable MediaStream video track ****");
                evalAndLog('mediaStream.getVideoTracks()[0].enabled = false');
                setTimeout(recheckVideoElementAfterEnabledChange, 100);
            }

            function canplay()
            {
                debug("<br>*** start playback ****");
                evalAndLog("video.play()");
                setTimeout(checkVideoElement, 100);
            }

            function setupStream(stream)
            {
                mediaStream = stream;
                testPassed('mediaDevices.getUserMedia succeeded.');

                debug("<br>**** setup video element ****");
                evalAndLog("video.srcObject = mediaStream");
            }

            function start()
            {
                description("Tests MediaStreamTrack callbacks.");
                video = document.querySelector('video');
                logEvent(video, 'loadedmetadata')
                logEvent(video, 'canplay', canplay)
                logEvent(video, 'canplaythrough')
                logEvent(video, 'loadeddata')
                logEvent(video, 'play')
                logEvent(video, 'ended', recheckVideoElementAfterStop)

                debug("<br>**** calling mediaDevices.getUserMedia() ****");
                if (window.testRunner)
                    testRunner.setUserMediaPermission(true);
                navigator.mediaDevices.getUserMedia( {video: true, audio: true} )
                    .then(setupStream)
                    .catch(function(reason) {
                        debug(`Stream generation failed with error: ${reason}`);
                    });
            }

            window.jsTestIsAsync = true;
            window.successfullyParsed = true;
        </script>
    </head>
    <body onload="start()">
        <p id="description"></p>
        <video controls  width="680" height="360"></video>
        <div id="console"></div>
        <script src="../../resources/js-test-post.js"></script>
    </body>
</html>