controls-volume-slider-keynav.html | Explore in Territory

<!DOCTYPE html>
<title>Test media controls volume slider keyboard navigation</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<audio controls></audio>
<script>
async_test(function(t) {
    var audio = document.querySelector("audio");
    audio.src = "content/test.oga";
    assert_equals(audio.volume, 1);

    audio.onloadedmetadata = t.step_func(function() {
        // Focus the volume slider.
        mediaControlsButton(audio, "volume-slider").focus();

        // 'Left' reduces volume.
        eventSender.keyDown("ArrowLeft");
        assert_less_than(audio.volume, 1);

        // 'Right' increases volume (same step as 'Left', but opposite sign).
        eventSender.keyDown("ArrowRight");
        assert_equals(audio.volume, 1);

        // 'Home' sets minimum volume (0).
        eventSender.keyDown("Home");
        assert_equals(audio.volume, 0);

        // 'End' sets maximum volume (1).
        eventSender.keyDown("End");
        assert_equals(audio.volume, 1);

        audio.onvolumechange = t.step_func_done();
    });
});
</script>

chromium/third_party/blink/web_tests/media/controls-volume-slider-keynav.html