<!DOCTYPE html>
<title>Elements not contained by the fullscreen element are inert</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="../shadow-dom/resources/focus-utils.js"></script>
<script src="trusted-click.js"></script>
<div id="log"></div>
<div id="before">
  <input>
</div>
<div id="target">
 <input>
 <input>
</div>
<div id="after">
  <input>
</div>
<script>
// The important side effect of inertness is that focus moves away from an
// element that becomes inert, and that when in fullscreen it's not possible to
// move focus out of the fullscreen element.
//
// TODO(foolip): This is not yet per spec, so change the spec:
// https://github.com/whatwg/fullscreen/issues/15
async_test(t => {
  const target = document.getElementById("target");
  const beforeInput = document.querySelector("#before input");
  const targetInputs = target.querySelectorAll("input");

  // Initial focus is body, cycle to first input.
  assert_equals(document.activeElement, document.body, 'active element #1');
  navigateFocusForward();
  assert_equals(document.activeElement, beforeInput, 'active element #2');

  document.onfullscreenchange = t.step_func_done(() => {
    // Entering fullscreen moved the focus back to body.
    assert_equals(document.activeElement, document.body);

    // Cycling focus should now skip the inert elements.
    navigateFocusForward();
    assert_equals(document.activeElement, targetInputs[0], 'active element #3');
    navigateFocusForward();
    assert_equals(document.activeElement, targetInputs[1], 'active element #4');
    navigateFocusForward();
    assert_equals(document.activeElement, targetInputs[0], 'active element #5');

    // Cycling focus in reverse should also skip the inert elements.
    navigateFocusBackward();
    assert_equals(document.activeElement, targetInputs[1], 'active element #6');
    navigateFocusBackward();
    assert_equals(document.activeElement, targetInputs[0], 'active element #7');
  });

  trusted_request(t, target);
});
</script>