select-focus-visible-with-mouse.html (1318B)
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 <select> 10 <option>option</option> 11 </select> 12 13 <style> 14 select, ::picker(select) { 15 appearance: base-select; 16 } 17 </style> 18 19 <script> 20 function click(element) { 21 return (new test_driver.Actions() 22 .pointerMove(1, 1, {origin: element}) 23 .pointerDown() 24 .pointerUp()) 25 .send(); 26 } 27 28 promise_test(async () => { 29 const select = document.querySelector('select'); 30 const option = document.querySelector('option'); 31 32 await click(select); 33 assert_true(select.matches(':open'), 34 'select should open after clicking it.'); 35 assert_equals(document.querySelector(':focus-visible'), null, 36 'Nothing should be :focus-visible after opening select with mouse.'); 37 38 await click(option); 39 assert_false(select.matches(':open'), 40 'select should close after clicking option.'); 41 assert_equals(document.querySelector(':focus-visible'), null, 42 'Nothing should be :focus-visible after picking an option.'); 43 }, 'Select should not match :focus-visible when using mouse.'); 44 </script>