interestfor-svg-a-event-dispatch.tentative.html (2543B)
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 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 16 <a id="nohref" interestfor="interestee"><text x="50" y="90">SVG A</text></a> 17 </svg> 18 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 19 <a href="/" id="interestsvga" interestfor="interestee"><text x="50" y="90">SVG A</text></a> 20 </svg> 21 <button id="otherbutton">Other Button</button> 22 <style> 23 [interestfor] { 24 interest-delay: 0s; 25 } 26 </style> 27 28 <script> 29 promise_test(async function (t) { 30 t.add_cleanup(async () => { 31 await hoverOver(otherbutton); 32 }); 33 let gotEvent = false; 34 interestee.addEventListener("interest", () => (gotEvent = true)); 35 await hoverOver(nohref); 36 assert_false(gotEvent, "InterestEvent should not get fired"); 37 nohref.setAttribute('href','foo'); 38 await hoverOver(nohref); 39 assert_false(gotEvent, "adding href while the element is already hovered should not fire interest"); 40 await hoverOver(otherbutton); 41 await hoverOver(nohref); 42 assert_true(gotEvent, "interest should now be fired"); 43 }, "InterestEvent is not dispatched unless the svg <a> has an href"); 44 45 promise_test(async function (t) { 46 t.add_cleanup(async () => { 47 await hoverOver(otherbutton); 48 }); 49 let event = null; 50 interestee.addEventListener("interest", (e) => (event = e), { once: true }); 51 await hoverOver(interestsvga); 52 assert_true(!!event, "InterestEvent is fired"); 53 assert_true(event instanceof InterestEvent, "event is InterestEvent"); 54 assert_equals(event.type, "interest", "type"); 55 assert_equals(event.bubbles, false, "bubbles"); 56 assert_equals(event.composed, true, "composed"); 57 assert_equals(event.isTrusted, true, "isTrusted"); 58 assert_equals(event.target, interestee, "target"); 59 assert_equals(event.source, interestsvga, "source"); 60 }, "InterestEvent dispatches on svg <a> hover"); 61 </script>