| <!DOCTYPE html> |
| <script src="../../../../../resources/testharness.js"></script> |
| <script src="../../../../../resources/testharnessreport.js"></script> |
| <script src="../../../../../fast/spatial-navigation/resources/snav-testharness.js"></script> |
| |
| <style> |
| div { |
| width: 100px; |
| height: 100px; |
| margin: 5px; |
| border: 1px solid black; |
| } |
| </style> |
| |
| <div id="first" tabindex="0">First</div> |
| <div id="second" tabindex="0">Second</div> |
| <div id="third" tabindex="0">Third</div> |
| |
| <script> |
| // This test checks that calling prevent default on key events doesn't |
| // prevent moving interest or entering/exiting focus. |
| let first = document.getElementById("first"); |
| let second = document.getElementById("second"); |
| let third = document.getElementById("third"); |
| |
| second.addEventListener('keydown', (e) => { |
| if (e.key !== "Escape") |
| e.preventDefault(); |
| }); |
| |
| test(() => { |
| assert_true(!!window.internals); |
| |
| // Move interest to 'second' |
| snav.triggerMove('Down'); |
| snav.triggerMove('Down'); |
| |
| // Enter focus into 'second' |
| eventSender.keyDown('Enter'); |
| assert_equals(document.activeElement, |
| second, |
| "Enter key moves focus into 'second'"); |
| |
| // Press down arrow. This should dispatch key event to the element. Since |
| // it is preventDefault'ed, we shouldn't change the interested element or |
| // focus. |
| let key_down_was_called = false; |
| const handler = (e) => { |
| assert_equals(e.key, 'ArrowDown'); |
| key_down_was_called = true; |
| }; |
| |
| second.addEventListener('keydown', handler); |
| |
| snav.triggerMove('Down'); |
| assert_true(key_down_was_called, "'second' gets key events while focused"); |
| |
| second.removeEventListener('keydown', handler); |
| |
| assert_equals(document.activeElement, |
| second, |
| "preventDefault on arrow key prevents movement"); |
| assert_equals(window.internals.interestedElement, |
| second, |
| "preventDefault on arrow key prevents movement"); |
| |
| // Send escape key, this should remove focus from the element but keep |
| // interest. |
| eventSender.keyDown('Escape'); |
| |
| assert_not_equals(document.activeElement, |
| second, |
| "Escape key should blur 'second'"); |
| assert_equals(window.internals.interestedElement, |
| second, |
| "Escape key shouldn't change interest from 'second'"); |
| |
| // Send down key. Now that focus was lost from 'second', we should move |
| // interest. |
| snav.triggerMove('Down'); |
| assert_equals(window.internals.interestedElement, |
| third, |
| "Movement possible over key event capturing element"); |
| }, "Focusless navigation with event cancelling handlers."); |
| </script> |
