interestevent-dispatch-shadow.tentative.html (3177B)
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 6 rel="help" 7 href="https://open-ui.org/components/interest-invokers.explainer/" 8 /> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/testdriver.js"></script> 12 <script src="/resources/testdriver-actions.js"></script> 13 <script src="/resources/testdriver-vendor.js"></script> 14 <script src="resources/invoker-utils.js"></script> 15 16 <body> 17 <script> 18 test((t) => { 19 const host = document.createElement("div"); 20 t.add_cleanup(() => host.remove()); 21 document.body.append(host); 22 const shadow = host.attachShadow({ mode: "closed" }); 23 const slot = shadow.appendChild(document.createElement("slot")); 24 let childEvent = null; 25 let childEventTarget = null; 26 let childEventSource = null; 27 let hostEvent = null; 28 let hostEventTarget = null; 29 let hostEventSource = null; 30 slot.addEventListener("interest", (e) => { 31 childEvent = e; 32 childEventTarget = e.target; 33 childEventSource = e.source; 34 }, { once: true }); 35 host.addEventListener("interest", (e) => { 36 hostEvent = e; 37 hostEventTarget = e.target; 38 hostEventSource = e.source; 39 }, { once: true }); 40 const event = new InterestEvent("interest", { 41 bubbles: true, 42 source: slot, 43 composed: true, 44 }); 45 slot.dispatchEvent(event); 46 assert_true(childEvent instanceof InterestEvent, "slot saw interest event"); 47 assert_equals(childEventTarget, slot, "target is child inside shadow boundary"); 48 assert_equals(childEventSource, slot, "source is child inside shadow boundary"); 49 assert_equals(hostEvent, childEvent, "event dispatch propagates across shadow boundary"); 50 assert_equals(hostEventTarget, host, "target is retargeted to shadowroot host"); 51 assert_equals(hostEventSource, host, "source is retargeted to shadowroot host"); 52 }, "InterestEvent propagates across shadow boundaries retargeting invoker source"); 53 54 promise_test(async (t) => { 55 const host = document.createElement("div"); 56 t.add_cleanup(() => host.remove()); 57 document.body.append(host); 58 const shadow = host.attachShadow({ mode: "open" }); 59 const button = shadow.appendChild(document.createElement("button")); 60 const interestee = host.appendChild(document.createElement("div")); 61 button.interestForElement = interestee; 62 button.style = "interest-delay: 0s"; 63 let event = null; 64 let eventTarget = null; 65 let eventSource = null; 66 interestee.addEventListener("interest", (e) => { 67 event = e; 68 eventTarget = e.target; 69 eventSource = e.source; 70 },{ once: true }); 71 await hoverOver(button); 72 assert_true(!!event,"InterestEvent gets fired"); 73 assert_true(event instanceof InterestEvent); 74 assert_equals(eventTarget, interestee, "target is interestee"); 75 assert_equals(eventSource, host, "interestee is host"); 76 }, "cross shadow InterestEvent retargets interestee to host element"); 77 </script>