interestfor-area-event-dispatch.tentative.html (2553B)
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 <map id="map1"><area shape="default" id="nohref" interestfor="interestee"></map> 16 <img id=nohref_img src="/images/blue.png" usemap="#map1"> 17 <map id="map2"><area href="/" shape="default" id="interestarea" interestfor="interestee"></map> 18 <img id=interestarea_img src="/images/blue.png" usemap="#map2"> 19 <button id="otherbutton">Other Button</button> 20 <style> 21 [interestfor] { 22 interest-delay: 0s; 23 } 24 </style> 25 26 <script> 27 promise_test(async function (t) { 28 t.add_cleanup(async () => { 29 await hoverOver(otherbutton); 30 }); 31 let gotEvent = false; 32 interestee.addEventListener("interest", () => (gotEvent = true), { once: true }); 33 await hoverOver(nohref_img); 34 assert_false(gotEvent, "InterestEvent should not get fired"); 35 nohref.setAttribute('href','foo'); 36 await hoverOver(nohref_img); 37 assert_false(gotEvent, "adding href while the element is already hovered should not fire interest"); 38 await hoverOver(otherbutton); 39 await hoverOver(nohref_img); 40 assert_true(gotEvent, "interest should now be fired"); 41 }, "InterestEvent is not dispatched unless the area has an href"); 42 43 promise_test(async function (t) { 44 t.add_cleanup(async () => { 45 await hoverOver(otherbutton); 46 }); 47 let event = null; 48 interestee.addEventListener("interest", (e) => (event = e), { once: true }); 49 await hoverOver(interestarea_img); 50 assert_true(!!event, "InterestEvent is fired"); 51 assert_true(event instanceof InterestEvent, "event is InterestEvent"); 52 assert_equals(event.type, "interest", "type"); 53 assert_equals(event.bubbles, false, "bubbles"); 54 assert_equals(event.composed, true, "composed"); 55 assert_equals(event.isTrusted, true, "isTrusted"); 56 assert_equals(event.target, interestee, "target"); 57 assert_equals(event.source, interestarea, "source"); 58 }, "InterestEvent dispatches on area hover"); 59 </script>