<html>
    <head>
    </head>
        <script>
            if (window.testRunner) {
                testRunner.dumpAsText();
                testRunner.waitUntilDone();
            }
            if (window.internals)
                internals.settings.setInvisibleAutoplayNotPermitted(true);
        </script>
    <body>
        <video autoplay width=320px height=240px id=myVideo controls playsInline></video>
        <p>Test that "invisible autoplay not allowed restriction" pauses realtime media when scrolled out of view and restarts as expected.</p>
        <div id="log"></div>
        <script>
            function doLog(msg)
            {
                log.innerHTML += msg + "<br>";
            }

            async function start()
            {
                doLog('** setting video.srcObject');
                myVideo.srcObject = await navigator.mediaDevices.getUserMedia({ video: true });
                doLog('** waiting to play');
                myVideo.onplay = play1;
                doLog('');
            }

            async function play1()
            {
                myVideo.onplay = undefined;

                doLog('** element played, going to pause it');
                myVideo.pause();
                myVideo.onpause = pause1;
            }

            async function pause1()
            {
                myVideo.onpause = undefined;
                doLog('** Setting style display none');
                myVideo.style.display = "none";
                await new Promise(resolve => setTimeout(resolve, 500));

                doLog('** playing video');
                myVideo.play();
                await new Promise(resolve => setTimeout(resolve, 500));

                doLog('** removing style display none');
                myVideo.style.removeProperty("display");
                await new Promise(resolve => setTimeout(resolve, 500));
                if (!myVideo.paused) {
                    finish();
                    return;
                }
                myVideo.onplay = finish;
            }

            function finish()
            {
                myVideo.onplay = undefined;
                doLog('** element played');
                doLog('** test finished');
                if (window.testRunner)
                    testRunner.notifyDone();
            }
            start();
        </script>
    </body>
</html>
