focus-navigation-scroller-interactive-child.html (1735B)
1 <!DOCTYPE html> 2 <script src='/resources/testharness.js'></script> 3 <script src='/resources/testharnessreport.js'></script> 4 <script src='/resources/testdriver.js'></script> 5 <script src=/resources/testdriver-actions.js></script> 6 <script src='/resources/testdriver-vendor.js'></script> 7 <script src='../resources/focus-utils.js'></script> 8 9 <button id="start">START</button> 10 <div id="scroller" style="overflow:scroll; width:50px; height:50px;"> 11 <div style="height:100px"></div> 12 <button id="submit" disabled>submit</button> 13 </div> 14 <button id="end">END</button> 15 16 <script> 17 promise_test(async () => { 18 const start = document.getElementById('start'); 19 const scroller = document.getElementById('scroller'); 20 const submit = document.getElementById('submit'); 21 const end = document.getElementById('end'); 22 23 start.focus(); 24 assert_equals(document.activeElement, start); 25 await navigateFocusForward(); 26 27 assert_equals(document.activeElement, scroller, 'scroller should be keyboard focusable'); 28 assert_true(submit.disabled, 'button should be disabled'); 29 submit.disabled = false; 30 assert_false(submit.disabled, 'button should be enabled'); 31 assert_equals(document.activeElement, scroller, 'focus should stay on scroller'); 32 33 await navigateFocusForward(); 34 assert_equals(document.activeElement, submit); 35 await navigateFocusForward(); 36 assert_equals(document.activeElement, end); 37 await navigateFocusBackward(); 38 assert_equals(document.activeElement, submit); 39 await navigateFocusBackward(); 40 assert_equals(document.activeElement, start,'After focus leaves the scroller, it should no longer be focusable'); 41 }, 'While focusing a keyboard-focusable scroller, adding interactive content should not cancel focusability'); 42 </script>