<!DOCTYPE html>
<html>
    <head>
        <title>Test dismissal of track menu when clicking anywhere in the page</title>
        <script src="media-controls.js"></script>
        <script src="media-file.js"></script>
        <script src="video-test.js"></script>
        <script src="trackmenu-test.js"></script>
        <script>
            var displayStyle;

            if (window.testRunner)
                testRunner.dumpAsText();

            function startTest()
            {
                testMenuIsVisible();
            }

            function testMenuIsVisible()
            {
                var trackListElement = getTrackListElement();
                displayStyle = window.getComputedStyle(trackListElement.parentNode).display;
                consoleWrite("*** Track menu should be visible " + displayStyle);
                testExpected("displayStyle", "block");
                // Now, click outside of the video to test that the track menu hides when clicking anywhere else.
                eventSender.mouseMoveTo(1, 1);
                eventSender.mouseDown();
                eventSender.mouseUp();
                testMenuIsInvisible();
            }

            function testMenuIsInvisible()
            {
                var trackListElement = getTrackListElement();
                displayStyle = window.getComputedStyle(trackListElement.parentNode).display;
                consoleWrite("*** Track menu should be invisible " + displayStyle);
                testExpected("displayStyle", "none");
                endTest();
            }

            function start()
            {
                findMediaElement();
                video.src = findMediaFile('video', 'content/test');
                waitForEvent('canplaythrough', function () { startTrackMenuTest(startTest); });

                internals.suspendAnimations(); // Captions menu can be animated and allowing the animation can create flakyness.
            }
        </script>
    </head>

    <body onload="start()">
        <p>Test that we are able to trigger the list of captions, and then click elsewhere to hide it.</p>
        <video width="500" height="300" controls>
            <track kind="captions" src="track/captions-webvtt/captions-fast.vtt" srclang="en">
        </video>
    </body>
</html>