interestfor-button-event-dispatch.tentative.html (2997B)
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 <button id="interestbutton" interestfor="interestee">Button</button> 16 <button id="otherbutton">Other Button</button> 17 <style> 18 [interestfor] { 19 interest-delay: 0s; 20 } 21 </style> 22 23 <script> 24 promise_test(async function (t) { 25 let event = null; 26 interestee.addEventListener("interest", (e) => (event = e), { once: true }); 27 await hoverOver(interestbutton); 28 assert_true(!!event, "InterestEvent is fired"); 29 assert_true(event instanceof InterestEvent, "event is InterestEvent"); 30 assert_equals(event.type, "interest", "type"); 31 assert_equals(event.bubbles, false, "bubbles"); 32 assert_equals(event.composed, true, "composed"); 33 assert_equals(event.isTrusted, true, "isTrusted"); 34 assert_equals(event.target, interestee, "target"); 35 assert_equals(event.source, interestbutton, "source"); 36 }, "InterestEvent dispatches on button hover"); 37 38 promise_test(async function (t) { 39 t.add_cleanup(async () => { 40 interestbutton.removeAttribute('disabled'); 41 await hoverOver(otherbutton); 42 }); 43 let called = false; 44 interestee.addEventListener( 45 "interest", 46 () => { 47 called = true; 48 }, 49 { once: true }, 50 ); 51 interestbutton.setAttribute("disabled", ""); 52 await hoverOver(interestbutton); 53 assert_false(called, "event was not called"); 54 }, "event does not dispatch if invoker is disabled"); 55 56 promise_test(async function (t) { 57 svgInterestee = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 58 t.add_cleanup(async () => { 59 interestbutton.interestForElement = interestee; 60 svgInterestee.remove(); 61 await hoverOver(otherbutton); 62 }); 63 document.body.append(svgInterestee); 64 let called = false; 65 assert_false(svgInterestee instanceof HTMLElement); 66 assert_true(svgInterestee instanceof Element); 67 let event = null; 68 svgInterestee.addEventListener("interest", (e) => (event = e), { once: true }); 69 interestbutton.interestForElement = svgInterestee; 70 await hoverOver(interestbutton); 71 assert_true(!!event, "InterestEvent is fired"); 72 assert_equals(event.source, interestbutton, "event.source is set to right element"); 73 assert_equals(event.target, svgInterestee, "event.target is set to right element"); 74 }, "event dispatches if interestee is non-HTML Element"); 75 </script>