| <!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> |
