| <!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> |
| <script src="media-file.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"); |
| volumeSlider = mediaControlsButton(video, "volume-slider"); |
| |
| // Make sure that both are visible. |
| assert_not_equals(getComputedStyle(muteButton).display, "none"); |
| assert_not_equals(getComputedStyle(volumeSlider).display, "none"); |
| |
| video.onvolumechange = t.step_func(_ => { |
| assert_not_equals(getComputedStyle(muteButton).display, "none"); |
| assert_not_equals(getComputedStyle(volumeSlider).display, "none"); |
| |
| video.onvolumechange = t.step_func(_ => { |
| assert_not_equals(getComputedStyle(muteButton).display, "none"); |
| assert_equals(getComputedStyle(volumeSlider).display, "none"); |
| |
| video.onvolumechange = t.step_func_done(_ => { |
| assert_not_equals(getComputedStyle(muteButton).display, "none"); |
| assert_equals(getComputedStyle(volumeSlider).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 = findMediaFile("video", "content/test"); |
| }) |
| </script> |
