<html>
    <head>
        <script src=media-file.js></script>
        <script src="media-controls.js"></script>
        <script>
            function toggleDisplay()
            {
                var video = document.getElementById('vid');
                if (video.style.display == "none") {
                    video.style.display = "inline-block";
                    video.addEventListener("seeked", done);
                    video.currentTime = 0; // so the snapshot always has the same frame
                } else
                    video.style.display = "none";
            }
            function test()
            {
                if (window.testRunner)
                    testRunner.waitUntilDone();
                setSrcById('vid', 'content/test.ogv');
                var video = document.getElementById('vid');
                enableTestMode(video);
                video.addEventListener("canplaythrough", test2);
                video.load();
            }
            function test2()
            {
                toggleDisplay();
                toggleDisplay();
            }
            function done()
            {
                // Wait for one rAF to ensure the thumbnail is onscreen, which
                // helps reduce flaky failures.
                if (window.testRunner)
                    requestAnimationFrame(_ => testRunner.notifyDone());
            }
        </script>
    </head>
    <body onload="test()">
        This tests that toggling the display property won't make the controls disappear.<br>
        <video id="vid" controls></video>
    </body>
</html>