interestfor-event-timing.tentative.html (3829B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <link rel="author" href="mailto:masonf@chromium.org"> 4 <link rel="help" href="https://open-ui.org/components/interest-invokers.explainer"> 5 <meta name="timeout" content="long"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="resources/invoker-utils.js"></script> 12 13 <button interestfor=popover id=invoker>Button</button> 14 <div popover id=popover>Target</div> 15 <button id=unrelated>Unrelated</div> 16 <style> 17 [interestfor] { 18 interest-delay: 0s; 19 } 20 </style> 21 22 <script> 23 promise_test(async (t) => { 24 const invoker = document.getElementById('invoker'); 25 const popover = document.getElementById('popover'); 26 const unrelated = document.getElementById('unrelated'); 27 28 let interestFired = 0; 29 let loseInterestFired = 0; 30 let listenerErrors = []; 31 function assert_in_listener(cond, expectation, msg) { 32 if (cond != expectation) { 33 listenerErrors.push(msg); 34 } 35 } 36 popover.addEventListener('interest', (e) => { 37 ++interestFired; 38 assert_in_listener(invoker.matches(':interest-source'),false,':interest-source should not yet match in the event handler'); 39 assert_in_listener(popover.matches(':interest-target'),false,':interest-target should not yet match in the event handler'); 40 assert_in_listener(popover.matches(':popover-open'),false,'popover shouldn\'t be open yet'); 41 if (interestFired === 1) { 42 e.preventDefault(); 43 } 44 }); 45 popover.addEventListener('loseinterest', (e) => { 46 ++loseInterestFired; 47 assert_in_listener(invoker.matches(':interest-source'),true,':interest-source should match in the event handler'); 48 assert_in_listener(popover.matches(':interest-target'),true,':interest-target should match in the event handler'); 49 assert_in_listener(popover.matches(':popover-open'),true,'popover should still be open'); 50 if (loseInterestFired === 1) { 51 e.preventDefault(); 52 } 53 }); 54 55 // Hover once, and cancel the event: 56 await hoverOver(invoker); 57 assert_equals(interestFired, 1, 'The `interest` event should have fired once (and event canceled)'); 58 await hoverOver(unrelated); 59 assert_equals(interestFired, 1, 'No further interest events'); 60 assert_equals(loseInterestFired, 0, 'No loseinterest events yet (the `interest` event was canceled, so we can\'t "lose" interest we never gained)'); 61 62 // Hover again, and don't cancel the event: 63 await hoverOver(invoker); 64 assert_equals(interestFired, 2, 'The `interest` event should have fired twice (event not canceled the second time)'); 65 assert_equals(loseInterestFired, 0, 'Still no loseinterest events'); 66 67 // De-hover, and cancel the event: 68 await hoverOver(unrelated); 69 assert_equals(interestFired, 2, 'No further interest events'); 70 assert_equals(loseInterestFired, 1, 'The `loseinterest` event should have fired once (and event canceled)'); 71 72 // De-hover again, and don't cancel the event: 73 await hoverOver(invoker); // Have to re-hover to get another interest event 74 assert_equals(interestFired, 2, 'No additional `interest` event because we cancelled loseinterest, so we still had interest'); 75 await hoverOver(unrelated); 76 assert_equals(interestFired, 2, 'No further interest events'); 77 assert_equals(loseInterestFired, 2, 'The `loseinterest` event should have fired once (event not canceled the second time)'); 78 79 assert_false(popover.matches(':popover-open'),'popover should be closed at the end'); 80 81 // Make sure none of the conditions within the event listeners failed. 82 assert_equals(listenerErrors.length,0,listenerErrors.join(', ')); 83 },'Event and pseudo-class timing for interest and loseinterest'); 84 </script>