volume-slider.html | Explore in Territory

<!DOCTYPE html>
<title>media controls volume slider</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<body></body>
<script>
// Ensure that we will show the volume slider.
internals.settings.setPreferHiddenVolumeControls(false);

var video = document.createElement('video');
var videoWithAudio = document.createElement('video');
var audio = document.createElement('audio');

const testElements = [video, videoWithAudio, audio];
let currentTest = 0;

testElements.forEach(element => {
  element.controls = true;
  element.preload = 'none';
});

video.id = 'video';
videoWithAudio.id = 'video-with-audio';
audio.id = 'audio';

video.src = '../content/test.webm'
videoWithAudio.src = '../content/test.oga';
audio.src = '../content/test.oga';


async_test(function(t) {
  runNextTest(t);
});

// Need to run each test synchronously to avoid the race conditions causing the
// slider to open/close.
function runNextTest(t) {
  if (currentTest == testElements.length) {
    t.done();
  }

  const testElement = testElements[currentTest];
  currentTest++;

  document.body.append(testElement);
  testMediaElement(t, testElement);
}

function testMediaElement(t, element) {
  const muteBtn = muteButton(element);
  const volumeSlider = volumeSliderElement(element);
  const currentTime = currentTimeElement(element);

  assert_equals(element.volume, 1, element.id + ': volume should start at 1');
  assert_false(isVolumeSliderOpen(element), element.id + ': volume slider should start closed');

  // Hovering over the mute button before preloading should not open the volume
  // slider.
  hoverMuteButton(element, t.step_func(() => {
    assert_false(isVolumeSliderOpen(element), element.id + ': volume slider should not open before metadata load');

    // Move the cursor away from the mute button and start testing the loaded
    // state.
    hoverOverControl(currentTime, t.step_func(() => {
      element.load();
    }));
  }));

  element.onloadedmetadata = t.step_func(function() {
    assert_false(isVolumeSliderOpen(element), element.id + ': volume slider should not open on metadata load');

    // Hovering over the mute button after preloading should open the volume
    // slider.
    hoverMuteButton(element, t.step_func(() => {
      assert_true(isVolumeSliderOpen(element), element.id + ': volume slider should open when hovering the mute button');

      // Moving the cursor onto the volume slider should not hide the volume slider.
      hoverOverControl(volumeSlider, t.step_func(() => {
        assert_true(isVolumeSliderOpen(element), element.id + ': volume slider should remain open when hovering the volume slider');

        // Wait for the volume slider to be completely open.
        runAfterVolumeSliderAnimationEnds(t.step_func(() => {

          // Clicking on the middle of the slider should change the volume.
          singleTapOnControl(volumeSlider, t.step_func(() => {
            assert_greater_than(element.volume, 0.4, element.id + ': clicking on volume slider should change volume');
            assert_less_than(element.volume, 0.6, element.id + ': clicking on volume slider should change volume');

            // Moving away from the element should close the volume slider.
            hoverOverControl(currentTime, t.step_func(() => {
              assert_false(isVolumeSliderOpen(element), element.id + ': volume slider should close when no longer hovered');

              // Kick off the next test.
              runNextTest(t);
            }));
          }));
        }));
      }));
    }));
  });
}
</script>
chromium/third_party/blink/web_tests/media/controls/volume-slider.html
