select-option-arrow-scroll.optional.html (1877B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/openui/open-ui/issues/1087#issuecomment-2381094286"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 9 <!-- This test is optional because the HTML spec does not require that specific 10 behaviors are mapped to specific keyboard buttons. --> 11 12 <style> 13 select, ::picker(select) { 14 appearance: base-select; 15 } 16 .spacer { 17 height: 10000px; 18 } 19 </style> 20 21 <select id=topofdocument> 22 <option>one</option> 23 <option>two</option> 24 </select> 25 26 <div class=spacer></div> 27 28 <select id=bottomofdocument> 29 <option>one</option> 30 <option>two</option> 31 </select> 32 33 <script> 34 const ArrowUp = '\uE013'; 35 const ArrowDown = '\uE015'; 36 ['topofdocument', 'bottomofdocument'].forEach(selectName => { 37 const select = document.getElementById(selectName); 38 promise_test(async () => { 39 select.scrollIntoView(); 40 await test_driver.click(select); 41 assert_equals(document.activeElement, select.querySelector('option'), 42 'First option should be focused when opening the select.'); 43 44 const scroll = window.scrollY; 45 await test_driver.send_keys(document.activeElement, ArrowUp); 46 await test_driver.send_keys(document.activeElement, ArrowUp); 47 assert_equals(window.scrollY, scroll, 48 'Document should not be scrolled when pressing ArrowUp on the first option.'); 49 50 await test_driver.send_keys(document.activeElement, ArrowDown); 51 await test_driver.send_keys(document.activeElement, ArrowDown); 52 assert_equals(window.scrollY, scroll, 53 'Document should not be scrolled when pressing ArrowDown on the last option.'); 54 }, `${selectName}: Arrow keys on options should not scroll the document.`); 55 }); 56 </script>