show-pause-icon-on-non-overlay-play-button.html

<!DOCTYPE html>
<html>
<title>Test that playing a video shows a pause icon in the non-overlay play button.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<video controls width=90 preload=metadata src="../content/60_sec_video.webm"></video>
<script>
async_test(t => {
  const video = document.querySelector('video');
  const button = playButton(video);
  let currentImage;

  video.addEventListener('canplay', t.step_func(() => {
    // Get the data string for the play button.
    currentImage = getCurrentImage();
    video.play();
  }), { once: true });

  video.addEventListener('playing', t.step_func(() => {
    const newImage = getCurrentImage();
    assert_not_equals(currentImage, newImage, "Play button should change to pause button.");
    currentImage = newImage;
    video.pause();
  }), { once: true });

  video.addEventListener('pause', t.step_func_done(() => {
    const newImage = getCurrentImage();
    assert_not_equals(currentImage, newImage, "Pause button should change back to play button");
  }), { once: true });

  function getCurrentImage() {
    return getComputedStyle(button).backgroundImage;
  }
});
</script>
</html>

chromium/third_party/blink/web_tests/media/controls/show-pause-icon-on-non-overlay-play-button.html