overflow-menu-focus.html | Explore in Territory

<!DOCTYPE html>
<html>
<title>Overflow menu give focus back to last focused element when gaining focus.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script src="../media-controls.js"></script>
<video controls width="100px"></video>
<script>
async_test(t => {

  const video  = document.querySelector('video');
  video.src = '../content/test.ogv';
  const menu = overflowMenu(video);
  enableTestMode(video);

  // Make the height small so that scroll bar will show.
  menu.style.maxHeight = "50px";

  video.onloadedmetadata = t.step_func(() => {
    singleTapOnControl(overflowButton(video), t.step_func(() => {
      assert_true(isControlVisible(menu), 'Overflow menu should be visible.');

      let lastElement = getFocusedElement(video);

      // Scroll to top and focus menu to simulate a scroll action.
      menu.scrollTop = 0;
      menu.focus();
      setTimeout(t.step_func_done(() => {
        assert_equals(getFocusedElement(video), lastElement, 'Overflow menu should give focus back.');
        assert_equals(menu.scrollTop, 0, 'Menu should not scroll when giving back focus.');
      }));
    }));
  });
});
</script>
</html>
chromium/third_party/blink/web_tests/media/controls/overflow-menu-focus.html
