select-option-hover-styles.html (2017B)
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 <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 <script src="/resources/testdriver-actions.js"></script> 9 10 <style> 11 select, select::picker(select) { 12 appearance: base-select; 13 } 14 </style> 15 16 <select> 17 <option class=one>one</option> 18 <option class=two>two</option> 19 <option class=three disabled>disabled</option> 20 </select> 21 22 <script> 23 const select = document.querySelector('select'); 24 const optionOne = document.querySelector('.one'); 25 const optionTwo = document.querySelector('.two'); 26 const disabledOption = document.querySelector('.three'); 27 28 promise_test(async () => { 29 assert_equals(getComputedStyle(select).appearance, 'base-select', 30 'appearance:base-select must be supported in order to run this test.'); 31 32 await test_driver.bless(); 33 select.showPicker(); 34 assert_true(select.matches(':open'), 35 'dropdown should open after calling showPicker().'); 36 37 await (new test_driver.Actions() 38 .pointerMove(1, 1, {origin: optionOne})) 39 .send(); 40 await new Promise(requestAnimationFrame); 41 assert_equals(getComputedStyle(optionOne).color, 'rgb(0, 0, 0)', 42 'Option color while hovering.'); 43 assert_equals(getComputedStyle(optionOne).backgroundColor, 'lab(0 0 0 / 0.1)', 44 'Option background-color while hovering.'); 45 46 await (new test_driver.Actions() 47 .pointerMove(1, 1, {origin: disabledOption})) 48 .send(); 49 await new Promise(requestAnimationFrame); 50 assert_equals(getComputedStyle(disabledOption).color, 'lab(0 0 0 / 0.5)', 51 'Disabled option color while hovering.'); 52 assert_equals(getComputedStyle(disabledOption).backgroundColor, 'rgba(0, 0, 0, 0)', 53 'Disabled option background-color while hovering.'); 54 }, 'Hover styles should be present for appearance:base-select options.'); 55 </script>