select-picker-hover-active-pseudo.html (4153B)
1 <!DOCTYPE html> 2 <link rel=help href="https://github.com/w3c/csswg-drafts/issues/11185"> 3 <link rel=author href="mailto:jarhar@chromium.org"> 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 <select id=defaultbutton> 11 <option>option</option> 12 </select> 13 14 <select id=custombutton> 15 <button>button</button> 16 <option>option</option> 17 </select> 18 19 <style> 20 select, ::picker(select) { 21 appearance: base-select; 22 } 23 </style> 24 25 <script> 26 27 ['defaultbutton', 'custombutton'].forEach(id => { 28 const select = document.getElementById(id); 29 const option = select.querySelector('option'); 30 function assertSupport() { 31 const style = getComputedStyle(document.querySelector('select')); 32 assert_equals(style.appearance, 'base-select', 33 'appearance:base-select must be supported in order to run this test.'); 34 } 35 36 promise_test(async () => { 37 assertSupport(); 38 await (new test_driver.Actions() 39 .pointerMove(1, 1, {origin: select})) 40 .send(); 41 await new Promise(requestAnimationFrame); 42 assert_true(select.matches(':hover'), 43 'select should match :hover.'); 44 assert_true(document.body.matches(':hover'), 45 'document.body should match :hover.'); 46 47 // sending a test_driver.Actions() which only has a pointerDown() will 48 // automatically add a pointerUp(), so we have to perform an entire click 49 // and check :active inside the mousedown listener instead. 50 let selectMatchedActive = false; 51 let bodyMatchedActive = false; 52 select.addEventListener('mousedown', () => { 53 selectMatchedActive = select.matches(':active'); 54 bodyMatchedActive = document.body.matches(':active'); 55 }); 56 await test_driver.click(select); 57 assert_true(selectMatchedActive, 58 'select should match :active.'); 59 assert_true(bodyMatchedActive, 60 'document.body should match :active.'); 61 62 await test_driver.click(select); 63 assert_false(select.matches(':open'), 64 'select should be closed at the end of the test.'); 65 }, `${id}: select should match :hover and :active when interacting with button.`); 66 67 promise_test(async () => { 68 assertSupport(); 69 assert_false(select.matches(':open'), 70 'select should be closed at the start of the test.'); 71 await test_driver.click(select); 72 await new Promise(requestAnimationFrame); 73 assert_true(select.matches(':open'), 74 'select should be open after clicking it.'); 75 76 await (new test_driver.Actions() 77 .pointerMove(1, 1, {origin: option})) 78 .send(); 79 await new Promise(requestAnimationFrame); 80 assert_true(option.matches(':hover'), 81 'option should match :hover.'); 82 assert_false(select.matches(':hover'), 83 'select should not match :hover.'); 84 assert_false(document.body.matches(':hover'), 85 'document.body should not match :hover.'); 86 87 // sending a test_driver.Actions() which only has a pointerDown() will 88 // automatically add a pointerUp(), so we have to perform an entire click 89 // and check :active inside the mousedown listener instead. 90 let optionMatchedActive = false; 91 let selectMatchedActive = false; 92 let bodyMatchedActive = false; 93 option.addEventListener('mousedown', () => { 94 optionMatchedActive = option.matches(':active'); 95 selectMatchedActive = select.matches(':active'); 96 bodyMatchedActive = document.body.matches(':active'); 97 }); 98 await (new test_driver.Actions() 99 .pointerMove(1, 1, {origin: option}) 100 .pointerDown() 101 .pointerUp()) 102 .send(); 103 assert_true(optionMatchedActive, 104 'option should match :active.'); 105 assert_false(selectMatchedActive, 106 'select should not match :active.'); 107 assert_false(bodyMatchedActive, 108 'document.body should not match :active.'); 109 assert_false(select.matches(':open'), 110 'select should be closed at the end of the test.'); 111 }, `${id}: select should not match :hover or :active when interacting with elements in the picker.`); 112 }); 113 </script>