video-controls-hidden-audio.html | Explore in Territory

<!DOCTYPE html>
<title>Test that hiding volume / mute button works as expected.</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 video = document.querySelector("video");

  video.oncanplaythrough = t.step_func(function() {
    // Request non-hidden audio controls.
    internals.settings.setPreferHiddenVolumeControls(false);
    video.muted = false;
    muteButton = mediaControlsButton(video, "mute-button");

    // Make sure that it's visible.
    assert_not_equals(getComputedStyle(muteButton).display, "none");

    video.onvolumechange = t.step_func(_ => {
      assert_not_equals(getComputedStyle(muteButton).display, "none");

      video.onvolumechange = t.step_func(_ => {
        assert_not_equals(getComputedStyle(muteButton).display, "none");

        video.onvolumechange = t.step_func_done(_ => {
          assert_not_equals(getComputedStyle(muteButton).display, "none");
        });

        // For muted video, the volume slider will hide but the mute button
        // should stay, since we always have it present for media which have audio.
        video.muted = true;
      });

      // Switch back to unmuted video and hide volume slider.
      internals.settings.setPreferHiddenVolumeControls(true);
      video.muted = false;
    });

    // Switch to muted video. Both should still be visible.
    video.muted = true;
  });

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