overflow-menu-hide-on-click-item.html

<!DOCTYPE html>
<title>Ensure overflow menu buttons are visible when expected.</title>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../media-controls.js'></script>
<style>

/*
 * We need to have the video small enough to have the mute button
 * displayed in overflow menu. Meanwhile, we want the video element
 * far from edge so that the overflow menu is fully displayed.
 */
video {
  width: 150px;
  position: absolute;
  left: 400px;
  top: 400px;
}

</style>
<video controls></video>
<script>
async_test(t => {
  const video = document.querySelector('video');
  video.src = '../content/test.ogv';
  enableTestMode(video);
  const track = video.addTextTrack('captions');

  video.onloadeddata = t.step_func(() => {
    const menu = overflowMenu(video);

    singleTapOnControl(overflowButton(video), t.step_func(() => {
      assert_not_equals(getComputedStyle(menu).display, 'none');

      singleTapOnControl(muteOverflowItem(video), t.step_func(() => {
        assert_equals(getComputedStyle(menu).display, 'none');

        singleTapOnControl(overflowButton(video), t.step_func(() => {
          assert_not_equals(getComputedStyle(menu).display, 'none');

          singleTapOnControl(captionsOverflowItem(video), t.step_func(() => {
            assert_equals(getComputedStyle(menu).display, 'none');

            singleTapOnControl(overflowButton(video), t.step_func(() => {
              assert_not_equals(getComputedStyle(menu).display, 'none');

              singleTapOnControl(playbackSpeedOverflowItem(video), t.step_func_done(() => {
                assert_equals(getComputedStyle(menu).display, 'none');
              }));
            }));
          }));
        }));
      }));
    }));
  });
});
</script>
chromium/third_party/blink/web_tests/media/controls/overflow-menu-hide-on-click-item.html
