select-initial-focus-display-animation.html (984B)
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 18 ::picker(select) { 19 transition: display allow-discrete 1s, opacity 1s; 20 } 21 22 select:not(:open)::picker(select) { 23 opacity: 0; 24 } 25 </style> 26 27 <script> 28 const select = document.querySelector('select'); 29 const option = document.querySelector('option'); 30 promise_test(async () => { 31 await test_driver.click(select); 32 await new Promise(requestAnimationFrame); 33 await new Promise(requestAnimationFrame); 34 assert_equals(document.activeElement, option); 35 }, 'Option initial focus should still work when a display animation is present.'); 36 </script>