| <!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: 130px; |
| height: 130px; |
| border: 1px solid black; |
| } |
| |
| #clip { |
| margin: 5px; |
| width: 100px; |
| height: 100px; |
| overflow: hidden; |
| background-color: lightgrey; |
| } |
| |
| #target { |
| margin: 20px; |
| height: 50px; |
| } |
| |
| pre { |
| position: absolute; |
| top: 400px; |
| } |
| |
| </style> |
| <div tabindex="0" id="outer"> |
| Outer Target |
| <div id="clip" tabindex="0"> |
| Clip |
| <div id="target" tabindex="0">Inner Target</div> |
| </div> |
| </div> |
| |
| <script> |
| const outer = document.getElementById("outer"); |
| const clip = document.getElementById("clip"); |
| const target = document.getElementById("target"); |
| |
| // This test checks that the spatial navigation overlap testing works |
| // correctly in the presence of clipping. The spatial navigation algorithm |
| // attempts to prioritize inner elements that are fully contained by another |
| // valid target. |
| // |
| // The spatial navigation algorithm focuses "containers" from the outside and |
| // in. This test ensures that also clipped "insiders" are reachable. |
| test(() => { |
| assert_true(!!window.internals); |
| |
| snav.triggerMove('Down'); |
| assert_equals(window.internals.interestedElement, |
| outer, |
| "Expected interest to move to |outer| element."); |
| |
| snav.triggerMove('Down'); |
| assert_equals(window.internals.interestedElement, |
| clip, |
| "Expected interest to move to |clip| element."); |
| |
| snav.triggerMove('Down'); |
| assert_equals(window.internals.interestedElement, |
| target, |
| "Expected interest to move to |target| element."); |
| }, "Navigation to fully contained but clipped element."); |
| </script> |
