test_focus_scroll_padding_tab.html (2061B)
1 <!doctype html> 2 <title>Test for bug 1617342</title> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <script src="/tests/SimpleTest/EventUtils.js"></script> 5 <style> 6 :root { 7 scroll-padding: 100px 0; 8 } 9 body { 10 margin: 0; 11 } 12 #fixed-footer { 13 height: 100px; 14 position: fixed; 15 bottom: 0; 16 left: 0; 17 width: 100%; 18 background: green; 19 } 20 #fixed-header { 21 height: 100px; 22 position: fixed; 23 top: 0; 24 left: 0; 25 width: 100%; 26 background: green; 27 } 28 .almost-full-padding { 29 height: calc(100vh - 200px); 30 } 31 .padding { 32 height: 100vh; 33 } 34 </style> 35 <div id="fixed-header"></div> 36 <div class="padding"></div> 37 <input> 38 <div class="almost-full-padding"></div> 39 <input> 40 <div class="padding"></div> 41 <input id="end"> 42 <div class="padding"></div> 43 <div id="fixed-footer"></div> 44 <script> 45 SimpleTest.waitForExplicitFinish(); 46 SimpleTest.waitForFocus(async function() { 47 let stack = []; 48 let end = document.getElementById("end"); 49 50 let lastActiveElement = document.activeElement; 51 52 do { 53 synthesizeKey("KEY_Tab"); 54 is(document.activeElement.tagName, "INPUT", "Should focus inputs only, there's nothing else"); 55 isnot(document.activeElement, lastActiveElement, "Focus should've moved once per tab keypress"); 56 let rect = document.activeElement.getBoundingClientRect(); 57 ok(rect.top >= 100, "Should not be covered by top bar"); 58 ok(rect.bottom >= 100, "Should not be covered by bottom bar"); 59 lastActiveElement = document.activeElement; 60 stack.push(lastActiveElement); 61 } while (document.activeElement != end) 62 63 do { 64 let previous = stack.pop(); 65 let rect = document.activeElement.getBoundingClientRect(); 66 ok(rect.top >= 100, "Should not be covered by top bar"); 67 ok(rect.bottom >= 100, "Should not be covered by bottom bar"); 68 is(document.activeElement, previous, "Focus should've moved backwards as expected"); 69 synthesizeKey("KEY_Tab", {shiftKey: true}); 70 } while (stack.length); 71 72 SimpleTest.finish(); 73 }); 74 </script>