| <!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: 200px; |
| height: 200px; |
| margin: 5px; |
| border: 1px solid black; |
| } |
| |
| input { |
| margin: 5px; |
| } |
| </style> |
| |
| <div tabindex="0" id="container"> |
| <input id="input" type="text" value="second"></input> |
| </div> |
| <a href="www" id="outsider">Outsider</a> |
| |
| <script> |
| const container = document.getElementById("container"); |
| const input = document.getElementById("input"); |
| const outsider = document.getElementById("outsider"); |
| |
| // Spatial navigation attempts to determine when one valid focusable fully |
| // contains another. In this case, the contained, "inner" target should be |
| // selected when we start from the container div. |
| // |
| // This test ensures the "is contained"-test works correctly on an <input>. |
| // This requires special attention because the focusable node is in the |
| // the <input>'s Shadow DOM. |
| test(() => { |
| assert_true(!!window.internals); |
| snav.triggerMove('Down'); |
| assert_equals(window.internals.interestedElement, |
| container, |
| "Expected interest to move to the surrounding div."); |
| |
| snav.triggerMove('Down'); |
| assert_equals(window.internals.interestedElement, |
| input, |
| "Expected interest to move to input box."); |
| }, "Navigation to fully contained input box."); |
| </script> |
