select-picker-animations.html (1733B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/issues/9799"> 4 <link rel=help href="https://issues.chromium.org/issues/359279550"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 10 <style> 11 select, select::picker(select) { 12 appearance: base-select; 13 } 14 15 select::picker(select) { 16 transition-behavior: allow-discrete; 17 transition-duration: 100s; 18 transition-property: display, overlay, opacity, color; 19 transition-timing-function: steps(1, jump-both); 20 opacity: 0; 21 color: black; 22 } 23 24 select::picker(select):popover-open { 25 opacity: 1; 26 color: rgb(200, 0, 0); 27 } 28 @starting-style { 29 select::picker(select):popover-open { 30 opacity: 0; 31 color: black; 32 } 33 } 34 </style> 35 36 <select> 37 <option>one</option> 38 <option>two</option> 39 </select> 40 41 <script> 42 const select = document.querySelector('select'); 43 const firstOption = document.querySelector('option'); 44 45 promise_test(async () => { 46 assert_equals(document.styleSheets[0].cssRules.length, 4, 47 'All 4 of the CSS rules should have been parsed.'); 48 49 assert_equals(getComputedStyle(firstOption).color, 'rgb(0, 0, 0)', 50 'option color should be black before animation starts.'); 51 await test_driver.bless(); 52 select.showPicker(); 53 await new Promise(requestAnimationFrame); 54 await new Promise(requestAnimationFrame); 55 assert_equals(getComputedStyle(firstOption).color, 'rgb(100, 0, 0)', 56 'option color should start animating when opening the picker.'); 57 }, 'select::picker(select) should support author provided top layer animations.'); 58 </script>