select-picker-interactive-element-focus.optional.html (1598B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/resources/testdriver.js"></script> 6 <script src="/resources/testdriver-vendor.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 9 <!-- This test is optional because the it tests the behavior of elements not 10 included in the select element's content model. --> 11 12 <select> 13 <button>invoker</button> 14 <button id=button>button</button> 15 <option>option</option> 16 </select> 17 18 <style> 19 select, ::picker(select) { 20 appearance: base-select; 21 } 22 </style> 23 24 <script> 25 function click(element) { 26 return (new test_driver.Actions() 27 .pointerMove(1, 1, {origin: element}) 28 .pointerDown() 29 .pointerUp()) 30 .send(); 31 } 32 33 promise_test(async () => { 34 const select = document.querySelector('select'); 35 const button = document.getElementById('button'); 36 const input = document.createElement('input'); 37 select.appendChild(input); 38 39 await click(select); 40 assert_true(select.matches(':open'), 41 'select should open after being clicked.'); 42 43 await click(button); 44 assert_true(select.matches(':open'), 45 'select should stay open after clicking button in picker.'); 46 assert_equals(document.activeElement, button, 'button'); 47 48 await click(input); 49 assert_true(select.matches(':open'), 50 'select should stay open after clicking input in picker.'); 51 assert_equals(document.activeElement, input, 'input'); 52 }, 'Clicking interactive elements inside the select picker should focus them.'); 53 </script>