| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <script src="../resources/testharness.js"></script> | 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/testharnessreport.js"></script> | 3 <script src="../resources/testharnessreport.js"></script> |
| 4 <script src="resources/shadow-dom.js"></script> | 4 <script src="resources/shadow-dom.js"></script> |
| 5 | 5 |
| 6 <div id="test1"> | 6 <div id="test1"> |
| 7 <template id="shadowroot" data-mode="open"> | 7 <div id="d1"> |
| 8 <slot id="slot" name="slot"></slot> | 8 <div id="target"></div> |
| 9 </template> | 9 </div> |
| 10 <input id="input" slot="slot"> | 10 </div> |
| 11 </div> | 11 |
| 12 <script> |
| 13 test(() => { |
| 14 let n = createTestTree(test1); |
| 15 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 16 assert_event_path_equals(log, makeExpectedEventPathLog(['target', 'd1', 'test1
'])); |
| 17 }, 'Event Path without ShadowRoots.'); |
| 18 </script> |
| 12 | 19 |
| 13 <div id="test2"> | 20 <div id="test2"> |
| 14 <template id="shadowroot" data-mode="open"> | 21 <div id="host"> |
| 15 <slot id="slot" name="slot"></slot> | 22 <template id="sr" data-mode="open"> |
| 16 </template> | 23 <div id="target"></div> |
| 17 <div id="input-parent" slot="slot"> | 24 </template> |
| 18 <input id="input"> | 25 </div> |
| 19 </div> | 26 </div> |
| 20 </div> | 27 |
| 28 <script> |
| 29 test(() => { |
| 30 let n = createTestTree(test2); |
| 31 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 32 assert_event_path_equals(log, makeExpectedEventPathLog(['target', 'sr', 'host'
, 'test2'])); |
| 33 }, 'Event Path with an open ShadowRoot.'); |
| 34 </script> |
| 21 | 35 |
| 22 <div id="test3"> | 36 <div id="test3"> |
| 23 <template id="open_shadow" data-mode="open"> | 37 <div id="host"> |
| 24 <div id="inner_open"> | 38 <template id="sr" data-mode="closed"> |
| 25 <template id="open_shadow_in_open_shadow" data-mode="open"> | 39 <div id="target"></div> |
| 26 <spen id="target_open" tabindex="0">open</spen> | 40 </template> |
| 27 </template> | 41 </div> |
| 28 </div> | 42 </div> |
| 29 </template> | 43 |
| 30 </div> | 44 <script> |
| 45 test(() => { |
| 46 let n = createTestTree(test3); |
| 47 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 48 let path = ['target','sr', 'host', 'test3']; |
| 49 let path1 = ['host', 'test3']; |
| 50 assert_event_path_equals(log, [['target', null, path], |
| 51 ['sr', null, path], |
| 52 ['host', null, path1], |
| 53 ['test3', null, path1]]); |
| 54 }, 'Event Path with a closed ShadowRoot.'); |
| 55 </script> |
| 31 | 56 |
| 32 <div id="test4"> | 57 <div id="test4"> |
| 33 <template id="closed_shadow" data-mode="closed"> | 58 <div id="host1"> |
| 34 <div id="inner_closed"> | 59 <template id="sr1" data-mode="open"> |
| 35 <template id="open_shadow_in_closed_shadow" data-mode="open"> | 60 <div id="host2"> |
| 36 <spen id="target_closed" tabindex="0">closed</spen> | 61 <template id="sr2" data-mode="open"> |
| 37 </template> | 62 <div id="target"></div> |
| 38 </div> | 63 </template> |
| 39 </template> | 64 </div> |
| 40 </div> | 65 </template> |
| 41 | 66 </div> |
| 42 <script> | 67 </div> |
| 43 function makeExpectedEventPathLog(path) { | 68 |
| 44 let expectedLog = []; | 69 <script> |
| 45 for (let i of path) { | 70 test(() => { |
| 46 expectedLog.push([i, null, path]); | 71 let n = createTestTree(test4); |
| 47 } | 72 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 48 return expectedLog; | 73 assert_event_path_equals(log, makeExpectedEventPathLog(['target', 'sr2', 'host
2', 'sr1', 'host1', 'test4'])); |
| 49 } | 74 }, 'Event Path with nested ShadowRoots: open > open.'); |
| 50 | 75 </script> |
| 51 test(() => { | 76 |
| 52 const event = new Event('my-event'); | 77 <div id="test5"> |
| 53 let dispatched = false; | 78 <div id="host1"> |
| 54 let target = document.createElement('div'); | 79 <template id="sr1" data-mode="open"> |
| 55 target.addEventListener('my-event', (e) => { | 80 <div id="host2"> |
| 56 assert_array_equals(e.composedPath(), [target]); | 81 <template id="sr2" data-mode="closed"> |
| 57 dispatched = true; | 82 <div id="target"></div> |
| 58 }); | 83 </template> |
| 59 assert_array_equals(event.composedPath(), []); | 84 </div> |
| 60 target.dispatchEvent(event); | 85 </template> |
| 61 assert_true(dispatched); | 86 </div> |
| 62 assert_array_equals(event.composedPath(), []); | 87 </div> |
| 63 }, "Event.composedPath() should return an empty array before/after dispatching a
n event"); | 88 |
| 64 | 89 <script> |
| 65 test(() => { | 90 test(() => { |
| 66 let n = createTestTree(test1); | 91 let n = createTestTree(test5); |
| 67 removeWhiteSpaceOnlyTextNodes(n.test1); | 92 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 68 let log = dispatchEventWithLog(n, n.input, new Event('my-event', { bubbles: tr
ue, composed: true })); | 93 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test5']; |
| 69 assert_event_path_equals(log, makeExpectedEventPathLog(['input', 'slot', 'shad
owroot', 'test1'])); | 94 let path1 = ['host2', 'sr1', 'host1', 'test5']; |
| 70 }, 'Triggered in a slotted element, eventPath should go through shadow tree.'); | 95 assert_event_path_equals(log, [['target', null, path], |
| 71 | 96 ['sr2', null, path], |
| 72 test(() => { | 97 ['host2', null, path1], |
| 73 let n = createTestTree(test2); | 98 ['sr1', null, path1], |
| 74 removeWhiteSpaceOnlyTextNodes(n.test2); | 99 ['host1', null, path1], |
| 75 let log = dispatchEventWithLog(n, n.input, new Event('my-event', { bubbles: tr
ue, composed: true })); | 100 ['test5', null, path1]]); |
| 76 assert_event_path_equals(log, makeExpectedEventPathLog(['input', 'input-parent
', 'slot', 'shadowroot', 'test2'])); | 101 }, 'Event Path with nested ShadowRoots: open > closed.'); |
| 77 }, 'EventPath works fine when event happens to a descendant of a slotted element
.'); | 102 </script> |
| 78 | 103 |
| 79 test(() => { | 104 <div id="test6"> |
| 80 let n = createTestTree(test3); | 105 <div id="host1"> |
| 81 removeWhiteSpaceOnlyTextNodes(n.test3); | 106 <template id="sr1" data-mode="closed"> |
| 82 let log = dispatchEventWithLog(n, n.target_open, new Event('my-event', { bubbl
es: true, composed: true })); | 107 <div id="host2"> |
| 83 let path = ['target_open', 'open_shadow_in_open_shadow', 'inner_open', 'open_s
hadow', 'test3'] | 108 <template id="sr2" data-mode="open"> |
| 109 <div id="target"></div> |
| 110 </template> |
| 111 </div> |
| 112 </template> |
| 113 </div> |
| 114 </div> |
| 115 |
| 116 <script> |
| 117 test(() => { |
| 118 let n = createTestTree(test6); |
| 119 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 120 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test6']; |
| 121 let path1 = ['host1', 'test6']; |
| 122 assert_event_path_equals(log, [['target', null, path], |
| 123 ['sr2', null, path], |
| 124 ['host2', null, path], |
| 125 ['sr1', null, path], |
| 126 ['host1', null, path1], |
| 127 ['test6', null, path1]]); |
| 128 }, 'Event Path with nested ShadowRoots: closed > open.'); |
| 129 </script> |
| 130 |
| 131 <div id="test7"> |
| 132 <div id="host1"> |
| 133 <template id="sr1" data-mode="closed"> |
| 134 <div id="host2"> |
| 135 <template id="sr2" data-mode="closed"> |
| 136 <div id="target"></div> |
| 137 </template> |
| 138 </div> |
| 139 </template> |
| 140 </div> |
| 141 </div> |
| 142 |
| 143 <script> |
| 144 test(() => { |
| 145 let n = createTestTree(test7); |
| 146 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 147 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test7']; |
| 148 let path1 = ['host2', 'sr1', 'host1', 'test7']; |
| 149 let path2 = ['host1', 'test7']; |
| 150 assert_event_path_equals(log, [['target', null, path], |
| 151 ['sr2', null, path], |
| 152 ['host2', null, path1], |
| 153 ['sr1', null, path1], |
| 154 ['host1', null, path2], |
| 155 ['test7', null, path2]]); |
| 156 }, 'Event Path with nested ShadowRoots: closed > closed.'); |
| 157 </script> |
| 158 |
| 159 <div id="test8"> |
| 160 <div id="host1"> |
| 161 <template id="sr1" data-mode="open"> |
| 162 <slot id="slot"></slot> |
| 163 </template> |
| 164 <div id="target"></div> |
| 165 </div> |
| 166 </div> |
| 167 |
| 168 <script> |
| 169 test(() => { |
| 170 let n = createTestTree(test8); |
| 171 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 172 let path = ['target', 'slot', 'sr1', 'host1', 'test8']; |
| 84 assert_event_path_equals(log, makeExpectedEventPathLog(path)); | 173 assert_event_path_equals(log, makeExpectedEventPathLog(path)); |
| 85 }, 'EventPath for Open > Open'); | 174 }, 'Event Path with a slot in an open Shadow Root.'); |
| 86 | 175 </script> |
| 87 test(() => { | 176 |
| 88 let n = createTestTree(test4); | 177 <div id="test9"> |
| 89 removeWhiteSpaceOnlyTextNodes(n.test4); | 178 <div id="host1"> |
| 90 let log = dispatchEventWithLog(n, n.target_closed, new Event('my-event', { bub
bles: true, composed: true })); | 179 <template id="sr1" data-mode="closed"> |
| 91 let path = ['target_closed', 'open_shadow_in_closed_shadow', 'inner_closed', '
closed_shadow', 'test4'] | 180 <slot id="slot"></slot> |
| 92 assert_event_path_equals(log, | 181 </template> |
| 93 [['target_closed', null, path], | 182 <div id="target"></div> |
| 94 ['open_shadow_in_closed_shadow', null, path], | 183 </div> |
| 95 ['inner_closed', null, path], | 184 </div> |
| 96 ['closed_shadow', null, path], | 185 |
| 97 ['test4', null, ['test4']]]); | 186 <script> |
| 98 }, 'EventPath for Closed > Open'); | 187 test(() => { |
| 99 </script> | 188 let n = createTestTree(test9); |
| 189 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 190 let path = ['target', 'slot', 'sr1', 'host1', 'test9']; |
| 191 let path1 = ['target', 'host1', 'test9']; |
| 192 assert_event_path_equals(log, [['target', null, path1], |
| 193 ['slot', null, path], |
| 194 ['sr1', null, path], |
| 195 ['host1', null, path1], |
| 196 ['test9', null, path1]]); |
| 197 }, 'Event Path with a slot in a closed Shadow Root.'); |
| 198 </script> |
| 199 |
| 200 <div id="test10"> |
| 201 <div id="host1"> |
| 202 <template id="sr1" data-mode="open"> |
| 203 <div id="host2"> |
| 204 <template id="sr2" data-mode="open"> |
| 205 <slot id="slot2"></slot> |
| 206 </template> |
| 207 <slot id="slot1"></slot> |
| 208 </div> |
| 209 </template> |
| 210 <div id="target"></div> |
| 211 </div> |
| 212 </div> |
| 213 |
| 214 <script> |
| 215 test(() => { |
| 216 let n = createTestTree(test10); |
| 217 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 218 let path = ['target', 'slot1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'test1
0']; |
| 219 assert_event_path_equals(log, makeExpectedEventPathLog(path)); |
| 220 }, 'Event Path with slots in nested ShadowRoots: open > open.'); |
| 221 </script> |
| 222 |
| 223 <div id="test11"> |
| 224 <div id="host1"> |
| 225 <template id="sr1" data-mode="closed"> |
| 226 <div id="host2"> |
| 227 <template id="sr2" data-mode="closed"> |
| 228 <slot id="slot2"></slot> |
| 229 </template> |
| 230 <slot id="slot1"></slot> |
| 231 </div> |
| 232 </template> |
| 233 <div id="target"></div> |
| 234 </div> |
| 235 </div> |
| 236 |
| 237 <script> |
| 238 test(() => { |
| 239 let n = createTestTree(test11); |
| 240 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 241 let path = ['target', 'slot1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'test1
1']; |
| 242 let path1 = ['target', 'slot1', 'host2', 'sr1', 'host1', 'test11']; |
| 243 let path2 = ['target', 'host1', 'test11']; |
| 244 assert_event_path_equals(log, [['target', null, path2], |
| 245 ['slot1', null, path1], |
| 246 ['slot2', null, path], |
| 247 ['sr2', null, path], |
| 248 ['host2', null, path1], |
| 249 ['sr1', null, path1], |
| 250 ['host1', null, path2], |
| 251 ['test11', null, path2]]); |
| 252 }, 'Event Path with slots in nested ShadowRoots: closed > closed.'); |
| 253 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2058673002:
Rewrite LayoutTests/shadow-dom/event-composed-path.html (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@clean-tests-4