<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>
        var video;

        function init()
        {
            if (window.testRunner)
                testRunner.waitUntilDone();

            internals.suspendAnimations(); // Volumebar can be animated and we would need a timeout to have it shown.

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

        function test()
        {
            video.volume = 0.7;

            if (window.eventSender) {
                var muteCoords;
                try {
                    muteCoords = mediaControlsButtonCoordinates(video, "mute-button");
                } catch (exception) {
                    testRunner.notifyDone();
                    return;
                }
                eventSender.mouseMoveTo(muteCoords[0], muteCoords[1]);
            }

            video.addEventListener("volumechange", function() {
                 if (window.testRunner)
                     testRunner.notifyDone();
            });
        }
    </script>
</head>
<body onload="init()">
    Tests if the volume slider is rendererd properly. This test assumes the<br>
    volume slider is implemented and mouse over the right bottom corner of<br>
    video element will show the volume slider.<br>
    <video oncanplaythrough="test()" controls></video>
</body>
</html>