<!-- webkit-test-runner [ enableModernMediaControls=false ] -->
<html>
<head>
    <title>Test rendering of volume slider of video tag</title>
    <script src=media-file.js></script>
    <script src=media-controls.js></script>
    <script src=video-test.js></script>
    <script>
        var video;
        var panel;
        var muteButtonCoordinates;
        var fadeoutTime = 300;

        function init()
        {
            video = document.getElementsByTagName("video")[0];
            video.src = findMediaFile("video", "content/test");

            consoleWrite("");
            consoleWrite("** Playing the video **");
            run("video.play()");
        }

        function test()
        {
            panel = mediaControlsElement(internals.shadowRoot(video).firstChild, "-webkit-media-controls-panel");

            if (window.eventSender) {
                try {
                    muteButtonCoordinates = mediaControlsButtonCoordinates(video, "mute-button");
                } catch (exception) {
                    testRunner.notifyDone();
                    return;
                }

                consoleWrite("");
                consoleWrite("** Move mouse somewhere over the panel **");
                run("eventSender.mouseMoveTo(muteButtonCoordinates[0], muteButtonCoordinates[1])");
            }

            consoleWrite("");
            consoleWrite("** Test that controls are shown when controls attribute is present **");
            testExpected("getComputedStyle(panel).display", 'none', "!=");

            if (window.eventSender) {
                consoleWrite("");
                consoleWrite("** Move mouse outside the video **");
                run("eventSender.mouseMoveTo(video.offsetLeft, video.offsetTop + 2 * video.offsetHeight)");
            }

            setTimeout(continueTest, fadeoutTime);
        }

        function continueTest()
        {
            if (getComputedStyle(panel).display != 'none') {
                setTimeout(continueTest, fadeoutTime);
                return;
            }

            consoleWrite("");
            consoleWrite("** The controls should have the display property set to none");
            testExpected("getComputedStyle(panel).display", 'none', "==");

            consoleWrite("");
            consoleWrite("** Remove controls attribute**");
            run("video.removeAttribute('controls')");

            consoleWrite("");
            consoleWrite("** Move mouse back over the panel **");
            run("eventSender.mouseMoveTo(muteButtonCoordinates[0], muteButtonCoordinates[1])");

            consoleWrite("");
            consoleWrite("** Video controls should not be shown **");
            testExpected("getComputedStyle(panel).display", 'none', "==");

            consoleWrite("");

            endTest();
        }

    </script>
</head>
<body onload="init()">
    Tests that showing / hiding video controls uses the display:none property<br>
    <video onplay="test()" controls></video>
</body>
</html>