volume-slider-doesnt-shift-on-smaller-controls.html

<!DOCTYPE html>
<title>Test that the volume slider doesn't shift during use on smaller controls</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<body></body>
<script>
async_test(t => {
  // Ensure that we will show the volume slider.
  setPreferHiddenVolumeControlsForTest(t, false);

  let video = document.createElement('video');
  video.controls = true;
  video.preload = 'none';
  video.width = 200;
  video.src = '../content/test.webm'
  document.body.append(video);
  enableTestMode(video);

  const fullscreenBtn = fullscreenButton(video);
  const muteBtn = muteButton(video);
  const volumeSlider = volumeSliderElement(video);

  // Wait for preload.
  video.addEventListener('loadedmetadata', t.step_func(() => {
    // Ensure that the mouse is outside of the mute button to prevent an issue
    // where the mouseover event didn't always fire correctly on the mute button.
    hoverOverControl(fullscreenBtn, t.step_func(() => {
      // Hover the mute button to open the volume slider.
      hoverOverControl(muteBtn, t.step_func(() => {
        // Wait for the volume slider to open.
        runAfterVolumeSliderAnimationEnds(t.step_func(() => {
          // Store initial position.
          const initialPosition = volumeSlider.getBoundingClientRect();
          // Use the slider.
          singleTapOnControl(volumeSlider, t.step_func_done(() => {
            // Assert that the slider hasn't moved.
            const newPosition = volumeSlider.getBoundingClientRect();
            ['x', 'y', 'width', 'height'].forEach(attr => {
              assert_equals(initialPosition[attr], newPosition[attr], attr + ' should not change');
            });
          }));
        }));
      }));
    }));
  }));

  video.load();
});
</script>
chromium/third_party/blink/web_tests/media/controls/volume-slider-doesnt-shift-on-smaller-controls.html
