| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="resources/snav-testharness.js"></script> |
| |
| <style> |
| div { |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| position: absolute; |
| } |
| |
| #blocker { |
| top: 480px; |
| height: 50px; |
| background-color: yellow; |
| } |
| |
| #A { |
| top: 490px; |
| } |
| </style> |
| |
| <div id="start" tabindex="0"></div> |
| <div id="A" tabindex="0"></div> |
| <div id="blocker"></div> |
| |
| <script> |
| const A = document.getElementById("A"); |
| const start = document.getElementById("start"); |
| |
| snav.assertSnavEnabledAndTestable(); |
| start.focus(); |
| |
| test(() => { |
| window.internals.setPageScaleFactor(1.2); |
| |
| // Down should scroll the visual viewport, since there's no targets |
| // availabe on screen(Visible part of element 'A' is obscured by |
| // blocker element). |
| snav.triggerMove('Down'); |
| assert_equals(document.activeElement, |
| start, |
| "Focus should not be moved."); |
| snav.triggerMove('Up'); |
| |
| window.internals.setPageScaleFactor(1); |
| // Now we can see visible part of element 'A'. |
| snav.triggerMove('Down'); |
| assert_equals(document.activeElement, |
| A, |
| "Focus should be moved to A."); |
| }, "Don't navigate to elements that are off screen."); |
| </script> |
