fullscreen/api/document-exit-fullscreen-timing-manual.html

<!DOCTYPE html>
<title>Document#exitFullscreen() timing</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../trusted-click.js"></script>
<div id="log"></div>
<script>
async_test(t => {
  const div = document.querySelector('div');
  trusted_request(t, div);

  document.onfullscreenchange = t.step_func(() => {
    // We are now in fullscreen. Exit again.
    assert_equals(document.fullscreenElement, div);
    document.exitFullscreen();

    // If fullscreenchange is an animation frame event, then animation frame
    // callbacks should be run after it is fired, before the timer callback.
    // The resize event should fire before the fullscreenchange event.
    const events = [];
    const callback = t.step_func(event => {
      // fullscreenElement should have changed before either event is fired.
      assert_equals(document.fullscreenElement, null, `fullscreenElement in {event.type} event`);
      events.push(event.type);
      if (event.type == 'fullscreenchange') {
        step_timeout(t.unreached_func('timer callback'));
        requestAnimationFrame(t.step_func_done(() => {
          assert_array_equals(events, ['resize', 'fullscreenchange'], 'event order');
        }));
      }
    });
    document.onfullscreenchange = window.onresize = callback;
  });
}, 'Timing of fullscreenchange and resize events');
</script>