interestfor-anchor-event-dispatch.tentative.html (3372B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <link rel="author" title="Keith Cirkel" href="mailto:keithamus@github.com" > 4 <link rel="author" title="Luke Warlow" href="mailto:lwarlow@igalia.com" > 5 <link rel=author href="mailto:masonf@chromium.org"> 6 <link rel="help" href="https://open-ui.org/components/interest-invokers.explainer"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="resources/invoker-utils.js"></script> 13 14 <div id="interestee"></div> 15 <a id="nohref" interestfor="interestee">Anchor</a> 16 <a href="/" id="interestanchor" interestfor="interestee">Anchor</a> 17 <button id="otherbutton">Other Button</button> 18 <style> 19 [interestfor] { 20 interest-delay: 0s; 21 } 22 </style> 23 24 <script> 25 promise_test(async function (t) { 26 t.add_cleanup(async () => { 27 await hoverOver(otherbutton); 28 }); 29 let gotEvent = false; 30 interestee.addEventListener("interest", () => (gotEvent = true)); 31 await hoverOver(nohref); 32 assert_false(gotEvent, "InterestEvent should not get fired"); 33 nohref.setAttribute('href','foo'); 34 await hoverOver(nohref); 35 assert_false(gotEvent, "adding href while the element is already hovered should not fire interest"); 36 await hoverOver(otherbutton); 37 await hoverOver(nohref); 38 assert_true(gotEvent, "interest should now be fired"); 39 }, "InterestEvent is not dispatched unless the anchor has an href"); 40 41 promise_test(async function (t) { 42 t.add_cleanup(async () => { 43 await hoverOver(otherbutton); 44 }); 45 let event = null; 46 interestee.addEventListener("interest", (e) => (event = e), { once: true }); 47 await hoverOver(interestanchor); 48 assert_true(!!event, "InterestEvent is fired"); 49 assert_true(event instanceof InterestEvent, "event is InterestEvent"); 50 assert_equals(event.type, "interest", "type"); 51 assert_equals(event.bubbles, false, "bubbles"); 52 assert_equals(event.composed, true, "composed"); 53 assert_equals(event.isTrusted, true, "isTrusted"); 54 assert_equals(event.target, interestee, "target"); 55 assert_equals(event.source, interestanchor, "source"); 56 }, "InterestEvent dispatches on anchor hover"); 57 </script> 58 59 <br> 60 <a href="/" id="parentanchor" interestfor="childdiv"><span>Anchor</span> 61 <div id="childdiv">Child div</div> 62 </a> 63 64 <script> 65 promise_test(async function (t) { 66 let events = []; 67 childdiv.addEventListener("interest", (e) => (events.push('interest'))); 68 childdiv.addEventListener("loseinterest", (e) => (events.push('loseinterest'))); 69 const justAnchor = parentanchor.firstChild; 70 assert_true(justAnchor instanceof HTMLSpanElement); 71 await hoverOver(justAnchor); 72 assert_array_equals(events,['interest'],'Hovering anchor should show interest'); 73 await hoverOver(childdiv); 74 assert_array_equals(events,['interest'],'Hovering the target shouldn\'t fire any new events'); 75 await hoverOver(justAnchor); 76 assert_array_equals(events,['interest'],'Hovering back on the anchor shouldn\'t fire new events'); 77 await hoverOver(otherbutton); 78 assert_array_equals(events,['interest','loseinterest'],'De-hovering both should fire loseinterest'); 79 }, "Nested invoker and invokee"); 80 </script>