| 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 <div id="d1"> | 7 <div id="d1"> |
| 8 <div id="target"></div> | 8 <div id="target"></div> |
| 9 </div> | 9 </div> |
| 10 </div> | 10 </div> |
| 11 | 11 |
| 12 <script> | 12 <script> |
| 13 test(() => { | 13 test(() => { |
| 14 let n = createTestTree(test1); | 14 let n = createTestTree(test1); |
| 15 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 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
'])); | 16 let path = ['target', 'd1', 'test1']; |
| 17 assert_event_path_equals(log, |
| 18 [['target', 'target', null, path], |
| 19 ['d1', 'target', null, path], |
| 20 ['test1', 'target', null, path]]); |
| 17 }, 'Event Path without ShadowRoots.'); | 21 }, 'Event Path without ShadowRoots.'); |
| 18 </script> | 22 </script> |
| 19 | 23 |
| 20 <div id="test2"> | 24 <div id="test2"> |
| 21 <div id="host"> | 25 <div id="host"> |
| 22 <template id="sr" data-mode="open"> | 26 <template id="sr" data-mode="open"> |
| 23 <div id="target"></div> | 27 <div id="target"></div> |
| 24 </template> | 28 </template> |
| 25 </div> | 29 </div> |
| 26 </div> | 30 </div> |
| 27 | 31 |
| 28 <script> | 32 <script> |
| 29 test(() => { | 33 test(() => { |
| 30 let n = createTestTree(test2); | 34 let n = createTestTree(test2); |
| 31 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 35 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'])); | 36 let path = ['target', 'sr', 'host', 'test2']; |
| 37 assert_event_path_equals(log, |
| 38 [['target', 'target', null, path], |
| 39 ['sr', 'target', null, path], |
| 40 ['host', 'host', null, path], |
| 41 ['test2', 'host', null, path]]); |
| 33 }, 'Event Path with an open ShadowRoot.'); | 42 }, 'Event Path with an open ShadowRoot.'); |
| 34 </script> | 43 </script> |
| 35 | 44 |
| 36 <div id="test3"> | 45 <div id="test3"> |
| 37 <div id="host"> | 46 <div id="host"> |
| 38 <template id="sr" data-mode="closed"> | 47 <template id="sr" data-mode="closed"> |
| 39 <div id="target"></div> | 48 <div id="target"></div> |
| 40 </template> | 49 </template> |
| 41 </div> | 50 </div> |
| 42 </div> | 51 </div> |
| 43 | 52 |
| 44 <script> | 53 <script> |
| 45 test(() => { | 54 test(() => { |
| 46 let n = createTestTree(test3); | 55 let n = createTestTree(test3); |
| 47 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 56 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 48 let path = ['target','sr', 'host', 'test3']; | 57 let path = ['target','sr', 'host', 'test3']; |
| 49 let path1 = ['host', 'test3']; | 58 let path1 = ['host', 'test3']; |
| 50 assert_event_path_equals(log, [['target', null, path], | 59 assert_event_path_equals(log, [['target', 'target', null, path], |
| 51 ['sr', null, path], | 60 ['sr', 'target', null, path], |
| 52 ['host', null, path1], | 61 ['host', 'host', null, path1], |
| 53 ['test3', null, path1]]); | 62 ['test3', 'host', null, path1]]); |
| 54 }, 'Event Path with a closed ShadowRoot.'); | 63 }, 'Event Path with a closed ShadowRoot.'); |
| 55 </script> | 64 </script> |
| 56 | 65 |
| 57 <div id="test4"> | 66 <div id="test4"> |
| 58 <div id="host1"> | 67 <div id="host1"> |
| 59 <template id="sr1" data-mode="open"> | 68 <template id="sr1" data-mode="open"> |
| 60 <div id="host2"> | 69 <div id="host2"> |
| 61 <template id="sr2" data-mode="open"> | 70 <template id="sr2" data-mode="open"> |
| 62 <div id="target"></div> | 71 <div id="target"></div> |
| 63 </template> | 72 </template> |
| 64 </div> | 73 </div> |
| 65 </template> | 74 </template> |
| 66 </div> | 75 </div> |
| 67 </div> | 76 </div> |
| 68 | 77 |
| 69 <script> | 78 <script> |
| 70 test(() => { | 79 test(() => { |
| 71 let n = createTestTree(test4); | 80 let n = createTestTree(test4); |
| 72 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 81 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 73 assert_event_path_equals(log, makeExpectedEventPathLog(['target', 'sr2', 'host
2', 'sr1', 'host1', 'test4'])); | 82 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test4']; |
| 83 assert_event_path_equals(log, [['target', 'target', null, path], |
| 84 ['sr2', 'target', null, path], |
| 85 ['host2', 'host2', null, path], |
| 86 ['sr1', 'host2', null, path], |
| 87 ['host1', 'host1', null, path], |
| 88 ['test4', 'host1', null, path]]); |
| 74 }, 'Event Path with nested ShadowRoots: open > open.'); | 89 }, 'Event Path with nested ShadowRoots: open > open.'); |
| 75 </script> | 90 </script> |
| 76 | 91 |
| 77 <div id="test5"> | 92 <div id="test5"> |
| 78 <div id="host1"> | 93 <div id="host1"> |
| 79 <template id="sr1" data-mode="open"> | 94 <template id="sr1" data-mode="open"> |
| 80 <div id="host2"> | 95 <div id="host2"> |
| 81 <template id="sr2" data-mode="closed"> | 96 <template id="sr2" data-mode="closed"> |
| 82 <div id="target"></div> | 97 <div id="target"></div> |
| 83 </template> | 98 </template> |
| 84 </div> | 99 </div> |
| 85 </template> | 100 </template> |
| 86 </div> | 101 </div> |
| 87 </div> | 102 </div> |
| 88 | 103 |
| 89 <script> | 104 <script> |
| 90 test(() => { | 105 test(() => { |
| 91 let n = createTestTree(test5); | 106 let n = createTestTree(test5); |
| 92 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 107 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 93 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test5']; | 108 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test5']; |
| 94 let path1 = ['host2', 'sr1', 'host1', 'test5']; | 109 let path1 = ['host2', 'sr1', 'host1', 'test5']; |
| 95 assert_event_path_equals(log, [['target', null, path], | 110 assert_event_path_equals(log, [['target', 'target', null, path], |
| 96 ['sr2', null, path], | 111 ['sr2', 'target', null, path], |
| 97 ['host2', null, path1], | 112 ['host2', 'host2', null, path1], |
| 98 ['sr1', null, path1], | 113 ['sr1', 'host2', null, path1], |
| 99 ['host1', null, path1], | 114 ['host1', 'host1', null, path1], |
| 100 ['test5', null, path1]]); | 115 ['test5', 'host1', null, path1]]); |
| 101 }, 'Event Path with nested ShadowRoots: open > closed.'); | 116 }, 'Event Path with nested ShadowRoots: open > closed.'); |
| 102 </script> | 117 </script> |
| 103 | 118 |
| 104 <div id="test6"> | 119 <div id="test6"> |
| 105 <div id="host1"> | 120 <div id="host1"> |
| 106 <template id="sr1" data-mode="closed"> | 121 <template id="sr1" data-mode="closed"> |
| 107 <div id="host2"> | 122 <div id="host2"> |
| 108 <template id="sr2" data-mode="open"> | 123 <template id="sr2" data-mode="open"> |
| 109 <div id="target"></div> | 124 <div id="target"></div> |
| 110 </template> | 125 </template> |
| 111 </div> | 126 </div> |
| 112 </template> | 127 </template> |
| 113 </div> | 128 </div> |
| 114 </div> | 129 </div> |
| 115 | 130 |
| 116 <script> | 131 <script> |
| 117 test(() => { | 132 test(() => { |
| 118 let n = createTestTree(test6); | 133 let n = createTestTree(test6); |
| 119 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 134 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 120 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test6']; | 135 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test6']; |
| 121 let path1 = ['host1', 'test6']; | 136 let path1 = ['host1', 'test6']; |
| 122 assert_event_path_equals(log, [['target', null, path], | 137 assert_event_path_equals(log, [['target', 'target', null, path], |
| 123 ['sr2', null, path], | 138 ['sr2', 'target', null, path], |
| 124 ['host2', null, path], | 139 ['host2', 'host2', null, path], |
| 125 ['sr1', null, path], | 140 ['sr1', 'host2', null, path], |
| 126 ['host1', null, path1], | 141 ['host1', 'host1', null, path1], |
| 127 ['test6', null, path1]]); | 142 ['test6', 'host1', null, path1]]); |
| 128 }, 'Event Path with nested ShadowRoots: closed > open.'); | 143 }, 'Event Path with nested ShadowRoots: closed > open.'); |
| 129 </script> | 144 </script> |
| 130 | 145 |
| 131 <div id="test7"> | 146 <div id="test7"> |
| 132 <div id="host1"> | 147 <div id="host1"> |
| 133 <template id="sr1" data-mode="closed"> | 148 <template id="sr1" data-mode="closed"> |
| 134 <div id="host2"> | 149 <div id="host2"> |
| 135 <template id="sr2" data-mode="closed"> | 150 <template id="sr2" data-mode="closed"> |
| 136 <div id="target"></div> | 151 <div id="target"></div> |
| 137 </template> | 152 </template> |
| 138 </div> | 153 </div> |
| 139 </template> | 154 </template> |
| 140 </div> | 155 </div> |
| 141 </div> | 156 </div> |
| 142 | 157 |
| 143 <script> | 158 <script> |
| 144 test(() => { | 159 test(() => { |
| 145 let n = createTestTree(test7); | 160 let n = createTestTree(test7); |
| 146 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 161 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 147 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test7']; | 162 let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test7']; |
| 148 let path1 = ['host2', 'sr1', 'host1', 'test7']; | 163 let path1 = ['host2', 'sr1', 'host1', 'test7']; |
| 149 let path2 = ['host1', 'test7']; | 164 let path2 = ['host1', 'test7']; |
| 150 assert_event_path_equals(log, [['target', null, path], | 165 assert_event_path_equals(log, [['target', 'target', null, path], |
| 151 ['sr2', null, path], | 166 ['sr2', 'target', null, path], |
| 152 ['host2', null, path1], | 167 ['host2', 'host2', null, path1], |
| 153 ['sr1', null, path1], | 168 ['sr1', 'host2', null, path1], |
| 154 ['host1', null, path2], | 169 ['host1', 'host1', null, path2], |
| 155 ['test7', null, path2]]); | 170 ['test7', 'host1', null, path2]]); |
| 156 }, 'Event Path with nested ShadowRoots: closed > closed.'); | 171 }, 'Event Path with nested ShadowRoots: closed > closed.'); |
| 157 </script> | 172 </script> |
| 158 | 173 |
| 159 <div id="test8"> | 174 <div id="test8"> |
| 160 <div id="host1"> | 175 <div id="host1"> |
| 161 <template id="sr1" data-mode="open"> | 176 <template id="sr1" data-mode="open"> |
| 162 <slot id="slot"></slot> | 177 <slot id="slot"></slot> |
| 163 </template> | 178 </template> |
| 164 <div id="target"></div> | 179 <div id="target"></div> |
| 165 </div> | 180 </div> |
| 166 </div> | 181 </div> |
| 167 | 182 |
| 168 <script> | 183 <script> |
| 169 test(() => { | 184 test(() => { |
| 170 let n = createTestTree(test8); | 185 let n = createTestTree(test8); |
| 171 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 186 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 172 let path = ['target', 'slot', 'sr1', 'host1', 'test8']; | 187 let path = ['target','slot', 'sr1', 'host1', 'test8']; |
| 173 assert_event_path_equals(log, makeExpectedEventPathLog(path)); | 188 assert_event_path_equals(log, [['target', 'target', null, path], |
| 189 ['slot', 'target', null, path], |
| 190 ['sr1', 'target', null, path], |
| 191 ['host1', 'target', null, path], |
| 192 ['test8', 'target', null, path]]); |
| 174 }, 'Event Path with a slot in an open Shadow Root.'); | 193 }, 'Event Path with a slot in an open Shadow Root.'); |
| 175 </script> | 194 </script> |
| 176 | 195 |
| 177 <div id="test9"> | 196 <div id="test9"> |
| 178 <div id="host1"> | 197 <div id="host1"> |
| 179 <template id="sr1" data-mode="closed"> | 198 <template id="sr1" data-mode="closed"> |
| 180 <slot id="slot"></slot> | 199 <slot id="slot"></slot> |
| 181 </template> | 200 </template> |
| 182 <div id="target"></div> | 201 <div id="target"></div> |
| 183 </div> | 202 </div> |
| 184 </div> | 203 </div> |
| 185 | 204 |
| 186 <script> | 205 <script> |
| 187 test(() => { | 206 test(() => { |
| 188 let n = createTestTree(test9); | 207 let n = createTestTree(test9); |
| 189 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 208 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); |
| 190 let path = ['target', 'slot', 'sr1', 'host1', 'test9']; | 209 let path = ['target', 'slot', 'sr1', 'host1', 'test9']; |
| 191 let path1 = ['target', 'host1', 'test9']; | 210 let path1 = ['target', 'host1', 'test9']; |
| 192 assert_event_path_equals(log, [['target', null, path1], | 211 assert_event_path_equals(log, [['target', 'target', null, path1], |
| 193 ['slot', null, path], | 212 ['slot', 'target', null, path], |
| 194 ['sr1', null, path], | 213 ['sr1', 'target', null, path], |
| 195 ['host1', null, path1], | 214 ['host1', 'target', null, path1], |
| 196 ['test9', null, path1]]); | 215 ['test9', 'target', null, path1]]); |
| 197 }, 'Event Path with a slot in a closed Shadow Root.'); | 216 }, 'Event Path with a slot in a closed Shadow Root.'); |
| 198 </script> | 217 </script> |
| 199 | 218 |
| 200 <div id="test10"> | 219 <div id="test10"> |
| 201 <div id="host1"> | 220 <div id="host1"> |
| 202 <template id="sr1" data-mode="open"> | 221 <template id="sr1" data-mode="open"> |
| 203 <div id="host2"> | 222 <div id="host2"> |
| 204 <template id="sr2" data-mode="open"> | 223 <template id="sr2" data-mode="open"> |
| 205 <slot id="slot2"></slot> | 224 <slot id="slot2"></slot> |
| 206 </template> | 225 </template> |
| 207 <slot id="slot1"></slot> | 226 <slot id="slot1"></slot> |
| 208 </div> | 227 </div> |
| 209 </template> | 228 </template> |
| 210 <div id="target"></div> | 229 <div id="target"></div> |
| 211 </div> | 230 </div> |
| 212 </div> | 231 </div> |
| 213 | 232 |
| 214 <script> | 233 <script> |
| 215 test(() => { | 234 test(() => { |
| 216 let n = createTestTree(test10); | 235 let n = createTestTree(test10); |
| 217 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 236 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']; | 237 let path = ['target','slot1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'test10
']; |
| 219 assert_event_path_equals(log, makeExpectedEventPathLog(path)); | 238 assert_event_path_equals(log, [['target', 'target', null, path], |
| 239 ['slot1', 'target', null, path], |
| 240 ['slot2', 'target', null, path], |
| 241 ['sr2', 'target', null, path], |
| 242 ['host2', 'target', null, path], |
| 243 ['sr1', 'target', null, path], |
| 244 ['host1', 'target', null, path], |
| 245 ['test10', 'target', null, path]]); |
| 220 }, 'Event Path with slots in nested ShadowRoots: open > open.'); | 246 }, 'Event Path with slots in nested ShadowRoots: open > open.'); |
| 221 </script> | 247 </script> |
| 222 | 248 |
| 223 <div id="test11"> | 249 <div id="test11"> |
| 224 <div id="host1"> | 250 <div id="host1"> |
| 225 <template id="sr1" data-mode="closed"> | 251 <template id="sr1" data-mode="closed"> |
| 226 <div id="host2"> | 252 <div id="host2"> |
| 227 <template id="sr2" data-mode="closed"> | 253 <template id="sr2" data-mode="closed"> |
| 228 <slot id="slot2"></slot> | 254 <slot id="slot2"></slot> |
| 229 </template> | 255 </template> |
| 230 <slot id="slot1"></slot> | 256 <slot id="slot1"></slot> |
| 231 </div> | 257 </div> |
| 232 </template> | 258 </template> |
| 233 <div id="target"></div> | 259 <div id="target"></div> |
| 234 </div> | 260 </div> |
| 235 </div> | 261 </div> |
| 236 | 262 |
| 237 <script> | 263 <script> |
| 238 test(() => { | 264 test(() => { |
| 239 let n = createTestTree(test11); | 265 let n = createTestTree(test11); |
| 240 let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: t
rue, composed: true })); | 266 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']; | 267 let path = ['target', 'slot1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'test1
1']; |
| 242 let path1 = ['target', 'slot1', 'host2', 'sr1', 'host1', 'test11']; | 268 let path1 = ['target', 'slot1', 'host2', 'sr1', 'host1', 'test11']; |
| 243 let path2 = ['target', 'host1', 'test11']; | 269 let path2 = ['target', 'host1', 'test11']; |
| 244 assert_event_path_equals(log, [['target', null, path2], | 270 assert_event_path_equals(log, [['target', 'target', null, path2], |
| 245 ['slot1', null, path1], | 271 ['slot1', 'target', null, path1], |
| 246 ['slot2', null, path], | 272 ['slot2', 'target', null, path], |
| 247 ['sr2', null, path], | 273 ['sr2', 'target', null, path], |
| 248 ['host2', null, path1], | 274 ['host2', 'target', null, path1], |
| 249 ['sr1', null, path1], | 275 ['sr1', 'target', null, path1], |
| 250 ['host1', null, path2], | 276 ['host1', 'target', null, path2], |
| 251 ['test11', null, path2]]); | 277 ['test11', 'target', null, path2]]); |
| 252 }, 'Event Path with slots in nested ShadowRoots: closed > closed.'); | 278 }, 'Event Path with slots in nested ShadowRoots: closed > closed.'); |
| 253 </script> | 279 </script> |
| OLD | NEW |