video-controls-toggling.html | Explore in Territory

<!DOCTYPE html>
<title>Test rendering of volume slider of video tag.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<video controls></video>
<script>
async_test(function(t) {
    var panel;
    var muteButtonCoordinates;
    var video = document.querySelector("video");

    video.onplay = t.step_func(function() {
        panel = mediaControlsButton(video, "panel");
        muteButtonCoordinates = mediaControlsButtonCoordinates(video, "mute-button");

        // Move mouse somewhere over the panel.
        eventSender.mouseMoveTo(muteButtonCoordinates[0], muteButtonCoordinates[1]);

        // Test that controls are shown when controls attribute is present.
        assert_not_equals(panel.style["display"], "none");

        // Move mouse outside the video.
        eventSender.mouseMoveTo(video.offsetLeft, video.offsetTop + 2 * video.offsetHeight);
        setTimeout(continueTest, controlsFadeOutDurationMs);
    });

    function continueTest() {
        if (panel.style["display"] != "none") {
            setTimeout(continueTest, controlsFadeOutDurationMs);
            return;
        }

        // Remove controls attribute.
        video.removeAttribute("controls");

        // Move mouse back over the panel.
        eventSender.mouseMoveTo(muteButtonCoordinates[0], muteButtonCoordinates[1]);

        // Video controls should not be shown.
        assert_equals(panel.style["display"], "none");
        t.done();
    }

    video.src = "content/test.ogv";
    video.play();
});
</script>
chromium/third_party/blink/web_tests/media/video-controls-toggling.html
