radio-focused-and-scrolled-into-view.html (1890B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Radio buttons should scroll into view when focused (if off-screen)</title> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#keyboard-accessibility-navigation-radios"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <style> 13 input[type="radio"] { 14 display: block; 15 } 16 #offscreen-radio { 17 margin-top: 200vh; 18 } 19 </style> 20 </head> 21 <body> 22 23 <h1>Radio buttons should scroll into view when focused (if off-screen)</h1> 24 25 <form> 26 <input type="radio" name="group" id="radio1"> 27 <input type="radio" name="group" id="radio2"> 28 <input type="radio" name="group" id="offscreen-radio"> 29 </form> 30 31 <script> 32 function simulateArrowDown() { 33 return new test_driver.Actions() 34 .keyDown("\uE015") // "ArrowDown" code point: https://www.w3.org/TR/webdriver2/#keyboard-actions 35 .send(); 36 } 37 38 promise_test(async t => { 39 const firstRadio = document.getElementById("radio1"); 40 const offscreenRadio = document.getElementById("offscreen-radio"); 41 const focusPromise = new Promise(resolve => 42 offscreenRadio.onfocus = () => t.step_timeout(resolve, 50) 43 ); 44 45 firstRadio.focus(); 46 await simulateArrowDown(); 47 await simulateArrowDown(); 48 await focusPromise; 49 50 const scrollTop = document.scrollingElement.scrollTop; 51 52 assert_equals(offscreenRadio, document.activeElement, 'offscreen radio is focused'); 53 assert_greater_than(scrollTop, 500, `out-of-viewport radio should trigger scroll — scrollTop=${scrollTop}`); 54 }, 'Focusing offscreen radio via keyboard should scroll it into view'); 55 56 </script> 57 58 </body> 59 </html>