event-post-dispatch.html (10913B)
1 <!DOCTYPE html> 2 <title>Shadow DOM: Event dispatch post result for event properties.</title> 3 <meta name="author" title="Eriko Kurimoto" href="mailto:elkurin@google.com"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="resources/shadow-dom.js"></script> 7 <script src="resources/event-path-test-helpers.js"></script> 8 9 <div id="test1"> 10 <div id="d1"> 11 <div id="target"></div> 12 </div> 13 </div> 14 15 <script> 16 let n1 = createTestTree(test1); 17 document.body.appendChild(n1.test1); 18 test(() => { 19 let log = dispatchEventWithEventLog(n1, n1.target, new Event('my-event', { bubbles: true, composed: true })); 20 assert_equals(log.event.target, n1.target); 21 assert_equals(log.event.eventPhase, 0); 22 assert_equals(log.event.currentTarget, null); 23 assert_equals(log.event.composedPath().length, 0); 24 }, 'Event properties post dispatch without ShadowRoots (composed: true).'); 25 26 test(() => { 27 let log = dispatchEventWithEventLog(n1, n1.target, new Event('my-event', { bubbles: true, composed: false })); 28 assert_equals(log.event.target, n1.target); 29 assert_equals(log.event.eventPhase, 0); 30 assert_equals(log.event.currentTarget, null); 31 assert_equals(log.event.composedPath().length, 0); 32 }, 'Event properties post dispatch without ShadowRoots (composed: false).'); 33 document.body.removeChild(n1.test1); 34 </script> 35 36 <div id="test2"> 37 <div id="host"> 38 <template id="sr" data-mode="open"> 39 <div id="target"></div> 40 </template> 41 </div> 42 </div> 43 44 <script> 45 let n2 = createTestTree(test2); 46 document.body.appendChild(n2.test2); 47 test(() => { 48 let log = dispatchEventWithEventLog(n2, n2.target, new Event('my-event', { bubbles: true, composed: true })); 49 assert_equals(log.event.target, n2.host); 50 assert_equals(log.event.eventPhase, 0); 51 assert_equals(log.event.currentTarget, null); 52 assert_equals(log.event.composedPath().length, 0); 53 }, 'Event properties post dispatch with an open ShadowRoot (composed: true).'); 54 55 test(() => { 56 let log = dispatchEventWithEventLog(n2, n2.target, new Event('my-event', { bubbles: true, composed: false })); 57 assert_equals(log.event.target, null); 58 assert_equals(log.event.eventPhase, 0); 59 assert_equals(log.event.currentTarget, null); 60 assert_equals(log.event.composedPath().length, 0); 61 }, 'Event properties post dispatch with an open ShadowRoot (composed: false).'); 62 document.body.removeChild(n2.test2); 63 </script> 64 65 <div id="test3"> 66 <div id="host"> 67 <template id="sr" data-mode="closed"> 68 <div id="target"></div> 69 </template> 70 </div> 71 </div> 72 73 <script> 74 let n3 = createTestTree(test3); 75 document.body.appendChild(n3.test3); 76 test(() => { 77 let log = dispatchEventWithEventLog(n3, n3.target, new Event('my-event', { bubbles: true, composed: true })); 78 assert_equals(log.event.target, n3.host); 79 assert_equals(log.event.eventPhase, 0); 80 assert_equals(log.event.currentTarget, null); 81 assert_equals(log.event.composedPath().length, 0); 82 }, 'Event properties post dispatch with a closed ShadowRoot (composed: true).'); 83 84 test(() => { 85 let log = dispatchEventWithEventLog(n3, n3.target, new Event('my-event', { bubbles: true, composed: false })); 86 assert_equals(log.event.target, null); 87 assert_equals(log.event.eventPhase, 0); 88 assert_equals(log.event.currentTarget, null); 89 assert_equals(log.event.composedPath().length, 0); 90 }, 'Event properties post dispatch with a closed ShadowRoot (composed: false).'); 91 document.body.removeChild(n3.test3); 92 </script> 93 94 <div id="test4"> 95 <div id="host1"> 96 <template id="sr" data-mode="open"> 97 <div id="host2"> 98 <template id="sr" data-mode="open"> 99 <div id="target"></div> 100 </template> 101 </div> 102 </template> 103 </div> 104 </div> 105 106 <script> 107 let n4 = createTestTree(test4); 108 document.body.appendChild(n4.test4); 109 test(() => { 110 let log = dispatchEventWithEventLog(n4, n4.target, new Event('my-event', { bubbles: true, composed: true })); 111 assert_equals(log.event.target, n4.host1); 112 assert_equals(log.event.eventPhase, 0); 113 assert_equals(log.event.currentTarget, null); 114 assert_equals(log.event.composedPath().length, 0); 115 }, 'Event properties post dispatch with nested ShadowRoots (composed: true).'); 116 117 test(() => { 118 let log = dispatchEventWithEventLog(n4, n4.target, new Event('my-event', { bubbles: true, composed: false })); 119 assert_equals(log.event.target, null); 120 assert_equals(log.event.eventPhase, 0); 121 assert_equals(log.event.currentTarget, null); 122 assert_equals(log.event.composedPath().length, 0); 123 }, 'Event properties post dispatch with nested ShadowRoots (composed: false).'); 124 document.body.removeChild(n4.test4); 125 </script> 126 127 <div id="test5"> 128 <div id="host"> 129 <template id="sr" data-mode="open"> 130 <div id="relatedTarget"> 131 <div id="target"></div> 132 </div> 133 </template> 134 </div> 135 </div> 136 137 <script> 138 let n5 = createTestTree(test5); 139 document.body.appendChild(n5.test5); 140 test(() => { 141 let log = dispatchEventWithEventLog(n5, n5.target, new MouseEvent('my-event', {bubbles: true, composed: true, relatedTarget: n5.relatedTarget})); 142 assert_equals(log.event.target, null); 143 assert_equals(log.event.relatedTarget, null); 144 assert_equals(log.event.eventPhase, 0); 145 assert_equals(log.event.currentTarget, null); 146 assert_equals(log.event.composedPath().length, 0); 147 }, 'Event properties post dispatch with relatedTarget in the same shadow tree. (composed: true)'); 148 149 test(() => { 150 let log = dispatchEventWithEventLog(n5, n5.target, new MouseEvent('my-event', {bubbles: true, composed: false, relatedTarget: n5.relatedTarget})); 151 assert_equals(log.event.target, null); 152 assert_equals(log.event.relatedTarget, null); 153 assert_equals(log.event.eventPhase, 0); 154 assert_equals(log.event.currentTarget, null); 155 assert_equals(log.event.composedPath().length, 0); 156 }, 'Event properties post dispatch with relatedTarget in the same shadow tree. (composed: false)'); 157 document.body.removeChild(n5.test5); 158 </script> 159 160 <div id="test6"> 161 <div id="host"> 162 <template id="sr" data-mode="open"> 163 <div id="target"></div> 164 </template> 165 </div> 166 <div id="relatedTarget"></div> 167 </div> 168 169 <script> 170 let n6 = createTestTree(test6); 171 document.body.appendChild(n6.test6); 172 test(() => { 173 let log = dispatchEventWithEventLog(n6, n6.target, new MouseEvent('my-event', {bubbles: true, composed: true, relatedTarget: n6.relatedTarget})); 174 assert_equals(log.event.target, n6.host); 175 assert_equals(log.event.relatedTarget, n6.relatedTarget); 176 assert_equals(log.event.eventPhase, 0); 177 assert_equals(log.event.currentTarget, null); 178 assert_equals(log.event.composedPath().length, 0); 179 }, 'Event properties post dispatch with relatedTarget in the document tree and the shadow tree. (composed: true)'); 180 181 test(() => { 182 let log = dispatchEventWithEventLog(n6, n6.target, new MouseEvent('my-event', {bubbles: true, composed: false, relatedTarget: n6.relatedTarget})); 183 assert_equals(log.event.target, null); 184 assert_equals(log.event.relatedTarget, null); 185 assert_equals(log.event.eventPhase, 0); 186 assert_equals(log.event.currentTarget, null); 187 assert_equals(log.event.composedPath().length, 0); 188 }, 'Event properties post dispatch with relatedTarget in the document tree and the shadow tree. (composed: false)'); 189 document.body.removeChild(n6.test6); 190 </script> 191 192 <div id="test7"> 193 <div id="host1"> 194 <template id="sr1" data-mode="open"> 195 <div id="target"></div> 196 </template> 197 </div> 198 <div id="host2"> 199 <template id="sr2" data-mode="open"> 200 <div id="relatedTarget"></div> 201 </template> 202 </div> 203 </div> 204 205 <script> 206 let n7 = createTestTree(test7); 207 document.body.appendChild(n7.test7); 208 test(() => { 209 let log = dispatchEventWithEventLog(n7, n7.target, new MouseEvent('my-event', {bubbles: true, composed: true, relatedTarget: n7.relatedTarget})); 210 assert_equals(log.event.target, n7.host1); 211 assert_equals(log.event.relatedTarget, n7.host2); 212 assert_equals(log.event.eventPhase, 0); 213 assert_equals(log.event.currentTarget, null); 214 assert_equals(log.event.composedPath().length, 0); 215 }, 'Event properties post dispatch with relatedTarget in the different shadow trees. (composed: true)'); 216 217 test(() => { 218 let log = dispatchEventWithEventLog(n7, n7.target, new MouseEvent('my-event', {bubbles: true, composed: false, relatedTarget: n7.relatedTarget})); 219 assert_equals(log.event.target, null); 220 assert_equals(log.event.relatedTarget, null); 221 assert_equals(log.event.eventPhase, 0); 222 assert_equals(log.event.currentTarget, null); 223 assert_equals(log.event.composedPath().length, 0); 224 }, 'Event properties post dispatch with relatedTarget in the different shadow trees. (composed: false)'); 225 document.body.removeChild(n7.test7); 226 227 test(t => { 228 let host = document.createElement("div"); 229 let shadow = host.attachShadow({ mode: "open" }); 230 let target = shadow.appendChild(document.createElement("trala")); 231 232 let eventListenerCalled = false; 233 target.addEventListener("my-event", t.step_func(e => { 234 eventListenerCalled = true; 235 assert_equals(window.event, undefined); 236 237 // Move target node out of shadow tree. 238 host.appendChild(target); 239 })); 240 241 let event = new MouseEvent('my-event', {composed: false, relatedTarget: host}); 242 target.dispatchEvent(event); 243 assert_true(eventListenerCalled); 244 245 assert_equals(event.target, null, "target should have been cleared"); 246 assert_equals(event.relatedTarget, null, "relatedTarget should have been cleared"); 247 assert_equals(event.eventPhase, 0); 248 assert_equals(event.currentTarget, null); 249 assert_equals(event.composedPath().length, 0); 250 }, 'Event properties post dispatch when target get moved out of the shadow tree by event listener'); 251 252 test(t => { 253 let host = document.createElement("div"); 254 let shadow = host.attachShadow({ mode: "open" }); 255 let target = host.appendChild(document.createElement("trala")); 256 257 let eventListenerCalled = false; 258 target.addEventListener("my-event", t.step_func(e => { 259 assert_equals(window.event, e); 260 })); 261 target.addEventListener("my-event", t.step_func(e => { 262 eventListenerCalled = true; 263 assert_equals(window.event, e); 264 // Move target node into the shadow tree. 265 shadow.append(target); 266 })); 267 target.addEventListener("my-event", t.step_func(e => { 268 assert_equals(window.event, e); 269 })); 270 271 let event = new MouseEvent('my-event', {composed: false, relatedTarget: host}); 272 target.dispatchEvent(event); 273 assert_true(eventListenerCalled); 274 275 // targets should not have been cleared since the node was not in the shadow tree when the event was initially dispatched. 276 assert_equals(event.target, target, "Target should not have been cleared"); 277 assert_equals(event.relatedTarget, host, "relatedTarget should not have been cleared"); 278 assert_equals(event.eventPhase, 0); 279 assert_equals(event.currentTarget, null); 280 assert_equals(event.composedPath().length, 0); 281 }, 'Event properties post dispatch when target get moved into the shadow tree by event listener'); 282 </script>