select-home-end-pagedown-pageup.optional.html (2125B)
1 <!DOCTYPE html> 2 <meta name=timeout content=long> 3 <link rel=author href="mailto:masonf@chromium.org"> 4 <link rel=help href="https://issues.chromium.org/issues/382101095"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 10 <!-- This test is optional because the HTML spec does not require that specific 11 behaviors are mapped to specific keyboard buttons. --> 12 13 <style> 14 select,::picker(select) { 15 appearance: base-select; 16 } 17 </style> 18 19 <select></select> 20 21 <script> 22 const keyMap = { 23 'Home': '\uE011', 24 'End': '\uE010', 25 'PageUp': '\uE00E', 26 'PageDown': '\uE00F' 27 }; 28 const select = document.querySelector('select'); 29 30 for(let i=1;i<=1000;++i) { 31 const option = document.createElement('option'); 32 option.textContent = `Option #${i}`; 33 option.id=i; 34 select.appendChild(option); 35 } 36 const firstOption = document.getElementById(1); 37 const middleOption = document.getElementById(500); 38 39 ['Home', 'End', 'PageUp', 'PageDown'].forEach(keyName => { 40 promise_test(async () => { 41 assert_false(select.matches(':open')); 42 select.value = middleOption.value; 43 assert_equals(select.value, middleOption.value,'Initial value'); 44 await test_driver.click(select); 45 assert_true(select.matches(':open')); 46 assert_equals(select.value, middleOption.value,'Value doesn\'t change when opening picker'); 47 assert_equals(document.activeElement, middleOption, 'Selected option should be focused'); 48 49 const keyCode = keyMap[keyName]; 50 await test_driver.send_keys(document.activeElement, keyCode); 51 assert_equals(select.value, middleOption.value, 'Selected option should not change'); 52 assert_not_equals(document.activeElement, middleOption, 'Focus should move'); 53 54 select.value = firstOption.value; 55 await test_driver.click(select); 56 assert_false(select.matches(':open'),'Clicking select should close picker'); 57 assert_equals(select.value, firstOption.value, 'Value should stay'); 58 }, `Behavior of ${keyName} for customizable-<select>`); 59 }); 60 </script>