event-with-related-target.html (12860B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shadow DOM: Firing an event with relatedTarget inside a shadow tree</title> 5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> 6 <meta name="assert" content="The retargeting algorithm is used to determine relative targets"> 7 <link rel="help" href="https://w3c.github.io/webcomponents/spec/shadow/#retargeting-relatedtarget"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="resources/event-path-test-helpers.js"></script> 11 </head> 12 <body> 13 <div id="log"></div> 14 <script> 15 16 /* 17 -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order 18 A ----------------------------------------------- A-SR 19 + B ----------- B-SR (4) + A1 --- A1-SR 20 + C + B1 (3) [*; 0-4] --- B1-SR (2) + A2-S + A1a 21 + D --- D-SR + B1a (*; 0) + B1b [1,2] --- B1b-SR 22 + D1 + B1c-S (1) + B1b1 23 + B1b2 24 */ 25 function testEventAtB1aWithB1a(mode) { 26 test(function () { 27 var nodes = createFixedTestTree(mode); 28 29 log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1})); 30 31 assert_array_equals(log.eventPath, 32 ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR'], 'The event path must be correct.'); 33 assert_array_equals(log.relatedTargets, 34 ['B1', 'B1', 'B1', 'B1', 'B1'], 'The related targets must be correct.'); 35 36 }, 'Firing an event at B1a with relatedNode at B1 with ' + mode + ' mode shadow trees'); 37 } 38 39 testEventAtB1aWithB1a('open'); 40 testEventAtB1aWithB1a('closed'); 41 42 /* 43 -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order 44 A ------------------------------------------------- A-SR 45 + B ----------- B-SR (4) + A1 --- A1-SR 46 + C + B1 (3) [0,3-4] --- B1-SR (2) + A2-S + A1a 47 + D --- D-SR + B1a (*; 0) + B1b [1,2] --- B1b-SR 48 + D1 + B1c-S (1) + B1b1 [*] 49 + B1b2 50 */ 51 function testEventAtB1aWithB1b1(mode) { 52 test(function () { 53 var nodes = createFixedTestTree(mode); 54 55 log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1b1})); 56 57 assert_array_equals(log.eventPath, 58 ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR'], 'The event path must be correct.'); 59 assert_array_equals(log.relatedTargets, 60 ['B1', 'B1b', 'B1b', 'B1', 'B1'], 'The related targets must be correct.'); 61 62 }, 'Firing an event at B1a with relatedNode at B1b1 with ' + mode + ' mode shadow trees'); 63 } 64 65 testEventAtB1aWithB1b1('open'); 66 testEventAtB1aWithB1b1('closed'); 67 68 /* 69 -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order 70 A -------------------------------------------------- A-SR 71 + B ------------- B-SR (5) + A1 --- A1-SR 72 + C + B1 (4) ------- B1-SR (3) + A2-S + A1a 73 + D --- D-SR + B1a [*; 0-5] + B1b (2) --- B1b-SR (1) 74 + D1 + B1c-S + B1b1 (*; 0) 75 + B1b2 76 */ 77 function testEventAtB1b1WithB1a(mode) { 78 test(function () { 79 var nodes = createFixedTestTree(mode); 80 81 log = dispatchEventWithEventLog(nodes, nodes.B1b1, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1a})); 82 83 assert_array_equals(log.eventPath, 84 ['B1b1', 'B1b-SR', 'B1b', 'B1-SR', 'B1', 'B-SR'], 'The event path must be correct.'); 85 assert_array_equals(log.relatedTargets, 86 ['B1a', 'B1a', 'B1a', 'B1a', 'B1a', 'B1a'], 'The related targets must be correct.'); 87 88 }, 'Firing an event at B1b1 with relatedNode at B1a with ' + mode + ' mode shadow trees'); 89 } 90 91 testEventAtB1b1WithB1a('open'); 92 testEventAtB1b1WithB1a('closed'); 93 94 /* 95 -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order 96 A (8) -------------------------------------------------- A-SR (7) 97 + B (5) -------------- B-SR (4) + A1 -------- A1-SR 98 + C + B1 (3) [*; 0-4] --- B1-SR (2) + A2-S (6) + A1a 99 + D [0-8] --- D-SR + B1a (*; 0) + B1b ------ B1b-SR 100 + D1 [*] + B1c-S (1) + B1b1 101 + B1b2 102 */ 103 function testEventAtB1aWithD1(mode) { 104 test(function () { 105 var nodes = createFixedTestTree(mode); 106 107 log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.D1})); 108 109 assert_array_equals(log.eventPath, 110 ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR', 'B', 'A2-S', 'A-SR', 'A'], 'The event path must be correct.'); 111 assert_array_equals(log.relatedTargets, 112 ['D', 'D', 'D', 'D', 'D', 'D', 'D', 'D', 'D'], 'The related targets must be correct.'); 113 114 }, 'Firing an event at B1a with relatedNode at D1 with ' + mode + ' mode shadow trees'); 115 } 116 117 testEventAtB1aWithD1('open'); 118 testEventAtB1aWithD1('closed'); 119 120 /* 121 -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order 122 A (6) ----------------------------------- A-SR (5) 123 + B (3) [0] ----------- B-SR + A1 ------ A1-SR 124 + C + B1 ----- B1-SR + A2-S (4) + A1a 125 + D (2) --- D-SR (1) + B1a [*] + B1b --- B1b-SR 126 + D1 (*; 0) + B1c-S + B1b1 127 + B1b2 128 */ 129 function testEventAtD1WithB1a(mode) { 130 test(function () { 131 var nodes = createFixedTestTree(mode); 132 133 log = dispatchEventWithEventLog(nodes, nodes.D1, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1a})); 134 135 assert_array_equals(log.eventPath, 136 ['D1', 'D-SR', 'D', 'B', 'A2-S', 'A-SR', 'A'], 'The event path must be correct.'); 137 assert_array_equals(log.relatedTargets, 138 ['B', 'B', 'B', 'B', 'B', 'B', 'B'], 'The related targets must be correct.'); 139 140 }, 'Firing an event at D1 with relatedNode at B1a with ' + mode + ' mode shadow trees'); 141 } 142 143 testEventAtD1WithB1a('open'); 144 testEventAtD1WithB1a('closed'); 145 146 /* 147 -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order 148 A (8) [0-5,8] ---------------------------------------- A-SR (7) 149 + B (5) ------- B-SR (4) + A1 [6,7] --- A1-SR 150 + C + B1 (3) ----- B1-SR (2) + A2-S (6) + A1a [*] 151 + D --- D-SR + B1a (*; 0) + B1b ------- B1b-SR 152 + D1 + B1c-S (1) + B1b1 153 + B1b2 154 */ 155 function testEventAtB1aWithA1a(mode) { 156 test(function () { 157 var nodes = createFixedTestTree(mode); 158 159 log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.A1a})); 160 161 assert_array_equals(log.eventPath, 162 ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR', 'B', 'A2-S', 'A-SR', 'A'], 'The event path must be correct.'); 163 assert_array_equals(log.relatedTargets, 164 ['A', 'A', 'A', 'A', 'A', 'A', 'A1', 'A1', 'A'], 'The related targets must be correct.'); 165 166 }, 'Firing an event at B1a with relatedNode at A1a with ' + mode + ' mode shadow trees'); 167 } 168 169 testEventAtB1aWithA1a('open'); 170 testEventAtB1aWithA1a('closed'); 171 172 /* 173 -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order 174 A (4) ----------------------------------------- A-SR (3) 175 + B [0-4] ----- B-SR + A1 (2) --- A1-SR (1) 176 + C + B1 ------- B1-SR + A2-S + A1a (*; 0) 177 + D --- D-SR + B1a [*] + B1b --- B1b-SR 178 + D1 + B1c-S + B1b1 179 + B1b2 180 */ 181 function testEventAtA1aWithB1a(mode) { 182 test(function () { 183 var nodes = createFixedTestTree(mode); 184 185 log = dispatchEventWithEventLog(nodes, nodes.A1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1a})); 186 187 assert_array_equals(log.eventPath, 188 ['A1a', 'A1-SR', 'A1', 'A-SR', 'A'], 'The event path must be correct.'); 189 assert_array_equals(log.relatedTargets, 190 ['B', 'B', 'B', 'B', 'B'], 'The related targets must be correct.'); 191 192 }, 'Firing an event at A1a with relatedNode at B1a with ' + mode + ' mode shadow trees'); 193 } 194 195 testEventAtA1aWithB1a('open'); 196 testEventAtA1aWithB1a('closed'); 197 198 /* 199 -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order 200 A (8) ----------------------------------- A-SR (7) 201 + B (5) ----- B-SR (4) + A2-S (6) 202 + C + B1 (3) ----- B1-SR (2) 203 + D --- D-SR + B1a (*; 0) + B1b ------- B1b-SR 204 + D1 + B1c-S (1) + B1b1 205 + B1b2 206 A1 [0-6] --- A1-SR 207 + A1a [*] 208 */ 209 function testEventAtB1aWithDetachedA1a(mode) { 210 test(function () { 211 var nodes = createFixedTestTree(mode); 212 213 nodes['A-SR'].removeChild(nodes.A1); 214 log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.A1a})); 215 216 assert_array_equals(log.eventPath, 217 ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR', 'B', 'A2-S', 'A-SR', 'A'], 'The event path must be correct.'); 218 assert_array_equals(log.relatedTargets, 219 ['A1', 'A1', 'A1', 'A1', 'A1', 'A1', 'A1', 'A1', 'A1'], 'The related targets must be correct.'); 220 221 }, 'Firing an event at B1a with relatedNode at A1a (detached) with ' + mode + ' mode shadow trees'); 222 } 223 224 testEventAtB1aWithDetachedA1a('open'); 225 testEventAtB1aWithDetachedA1a('closed'); 226 227 /* 228 -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order 229 A ----------------------------------- A-SR 230 + B [0-3] ----- B-SR + A2-S 231 + C + B1 -------- B1-SR 232 + D --- D-SR + B1a [*] + B1b --- B1b-SR 233 + D1 + B1c-S + B1b1 234 + B1b2 235 A1 (2) --- A1-SR (1) 236 + A1a (*; 0) 237 */ 238 function testEventAtA1aWithDetachedB1a(mode) { 239 test(function () { 240 var nodes = createFixedTestTree(mode); 241 242 nodes['A-SR'].removeChild(nodes.A1); 243 log = dispatchEventWithEventLog(nodes, nodes.A1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1a})); 244 245 assert_array_equals(log.eventPath, ['A1a', 'A1-SR', 'A1'], 'The event path must be correct.'); 246 assert_array_equals(log.relatedTargets, ['B', 'B', 'B' ], 'The related targets must be correct.'); 247 248 }, 'Firing an event at A1a with relatedNode at B1a (detached) with ' + mode + ' mode shadow trees'); 249 } 250 251 testEventAtA1aWithDetachedB1a('open'); 252 testEventAtA1aWithDetachedB1a('closed'); 253 254 </script> 255 </body> 256 </html>