select-picker-exit-animation.html (1861B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://issues.chromium.org/issues/394133544"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.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 19 select.animate::picker(select) { 20 transition-property: display, color/*, overlay*/; 21 transition-behavior: allow-discrete; 22 transition-duration: 100s; 23 transition-timing-function: steps(2, start); 24 color: white; 25 } 26 27 select.animate option { 28 transition-property: background-color; 29 transition-duration: 100s; 30 transition-timing-function: steps(2, start); 31 background-color: black; 32 } 33 34 ::picker(select) { 35 color: white; 36 } 37 option { 38 background-color: black; 39 } 40 41 select.animate:not(:open)::picker(select) { 42 color: black; 43 } 44 select.animate:not(:open) option { 45 background-color: white; 46 } 47 </style> 48 49 <script> 50 const select = document.querySelector('select'); 51 const option = document.querySelector('option'); 52 promise_test(async () => { 53 await test_driver.click(select); 54 await new Promise(requestAnimationFrame); 55 select.classList.add('animate'); 56 await new Promise(requestAnimationFrame); 57 await test_driver.click(select); 58 await new Promise(requestAnimationFrame); 59 await new Promise(requestAnimationFrame); 60 61 const style = getComputedStyle(option); 62 assert_equals(style.color, 'rgb(128, 128, 128)', 63 'color should transition based on the exit animation.'); 64 assert_equals(style.backgroundColor, 'rgb(128, 128, 128)', 65 'background-color should transition based on the exit animation.'); 66 }, 'Top layer exit animations should work on ::picker(select) just like a popover.'); 67 </script>