video-enter-exit-fullscreen-while-hovering-shows-controls.html

<!DOCTYPE html>
<title>Tests that video controls are shown when entering/exiting fullscreen
whilst hovering over the controls. Opposite of
video-enter-exit-fullscreen-without-hovering-doesnt-show-controls.html</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");
  enableTestMode(video);

  video.oncanplaythrough = t.step_func(function() {
    video.oncanplaythrough = null;

    var panel = mediaControlsButton(video, "panel");

    // Move mouse to the play button and start playing the video.
    clickAtCoordinates(...elementCoordinates(enabledPlayButton(video)));

    assert_equals(getComputedStyle(panel).opacity, "1",
                  "Inline controls should initially show since controls " +
                  "attribute is present");

    // Get fullscreen button coordinates whilst it is visible.
    var inlineFullscreenButtonCoordinates =
        mediaControlsButtonCoordinates(video, "fullscreen-button");

    // Move mouse away so it no longer hovers over controls/video.
    eventSender.mouseMoveTo(0, 0);

    runAfterHideMediaControlsTimerFired(t.step_func(function() {
      assert_equals(getComputedStyle(panel).opacity, "0",
                    "Inline controls should be hidden by timer");

      // Move mouse to the fullscreen button and enter fullscreen. Leave the
      // mouse hovering over the controls.
      clickAtCoordinates(...inlineFullscreenButtonCoordinates);
    }), video);

    video.onfullscreenchange = t.step_func(function() {
      video.onfullscreenchange = null;

      assert_equals(document.fullscreenElement, video,
                    "Should have entered fullscreen");

      assert_equals(getComputedStyle(panel).opacity, "1",
                    "Fullscreen controls should show after entering " +
                    "fullscreen since mouse is hovering over controls");

      // Get fullscreen button coordinates whilst it is visible.
      var fullscreenFullscreenButtonCoordinates =
          mediaControlsButtonCoordinates(video, "fullscreen-button");

      // Move mouse away so it no longer hovers over controls/video.
      eventSender.mouseMoveTo(0, 0);

      runAfterHideMediaControlsTimerFired(t.step_func(function() {
        assert_equals(getComputedStyle(panel).opacity, "0",
                      "Fullscreen controls should be hidden by timer");

        // Move mouse to the fullscreen button and exit fullscreen. Leave the
        // mouse hovering over the controls.
        clickAtCoordinates(...fullscreenFullscreenButtonCoordinates);
      }), video);

      video.onfullscreenchange = t.step_func(function() {
        assert_equals(document.fullscreenElement, null,
                      "Should have exited fullscreen");

        waitForHoverEffectUpdate(t.step_func(function() {
          assert_equals(getComputedStyle(panel).opacity, "1",
                        "Inline controls should show again after exiting " +
                         "fullscreen since mouse is hovering over controls");
        }));

        t.done();
      });
    });
  });

  video.src = "../content/test-25fps.ogv";
});
</script>
chromium/third_party/blink/web_tests/media/controls/video-enter-exit-fullscreen-while-hovering-shows-controls.html
