select-popover-exit-animation.html (1200B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <meta name=fuzzy content="maxDifference=0-41;totalPixels=0-6"> 4 <link rel=author href="mailto:jarhar@chromium.org"> 5 <link rel=match href="select-popover-exit-animation-ref.html"> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 10 <div>hover target</div> 11 <select> 12 <option>option</option> 13 </select> 14 15 <style> 16 select,::picker(select) { 17 appearance: base-select; 18 } 19 select.animate::picker(select) { 20 transition: display 10000s allow-discrete, overlay 10000s allow-discrete; 21 } 22 </style> 23 24 <script> 25 (async () => { 26 const select = document.querySelector('select'); 27 await test_driver.click(select); 28 await new Promise(requestAnimationFrame); 29 await new Promise(requestAnimationFrame); 30 select.classList.add('animate'); 31 await test_driver.click(select); 32 select.blur(); 33 await (new test_driver.Actions() 34 .pointerMove(1, 1, {origin: document.querySelector('div')})) 35 .send(); 36 await new Promise(requestAnimationFrame); 37 await new Promise(requestAnimationFrame); 38 document.documentElement.classList.remove('reftest-wait'); 39 })(); 40 </script>