| <!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> |
| <input id="second" type="text" value="Second (|d| key will remove)"></input> |
| <div id="third" tabindex="0">Third</div> |
| |
| <script> |
| // This checks that setting |display:none| on an editable element that is |
| // interested and focused resets spat nav and allows further navigation. |
| let first = document.getElementById("first"); |
| let second = document.getElementById("second"); |
| let third = document.getElementById("third"); |
| |
| function setDisplayNone() { |
| return new Promise(function(resolve) { |
| second.style.display = "none"; |
| // Need a rAF for automated testing since focus won't be reevaluated |
| // until BeginFrame. |
| requestAnimationFrame(() => requestAnimationFrame(resolve)); |
| }); |
| } |
| |
| // For manual testing. |
| second.addEventListener('keydown', (e) => { |
| if (e.key == 'd') |
| setDisplayNone(); |
| }); |
| |
| promise_test(async () => { |
| // Move interest to 'second' and focus it. |
| snav.triggerMove('Down'); |
| snav.triggerMove('Down'); |
| eventSender.keyDown('Enter'); |
| |
| assert_equals(window.internals.interestedElement, |
| second, |
| "Input box starts off with interest."); |
| assert_equals(document.activeElement, |
| second, |
| "Enter key moves focus into 'second'"); |
| |
| // Set |display:none| on the focused input. Ensure navigation resets and |
| // starts as if from un-interested; continues to work. |
| await setDisplayNone(); |
| |
| snav.triggerMove('Down'); |
| assert_equals(window.internals.interestedElement, |
| first, |
| "'first' box should be interested."); |
| |
| snav.triggerMove('Down'); |
| assert_equals(window.internals.interestedElement, |
| third, |
| "'third' box should be interested."); |
| |
| }, "Spat-Nav resets gracefully after focused editable becomes display:none."); |
| </script> |
