| OLD | NEW |
| (Empty) | |
| 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/#reta
rgeting-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 = createTestTree(mode); |
| 28 |
| 29 log = dispatchEventWithLog(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 mus
t 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 = createTestTree(mode); |
| 54 |
| 55 log = dispatchEventWithLog(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 mus
t 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 = createTestTree(mode); |
| 80 |
| 81 log = dispatchEventWithLog(nodes, nodes.B1b1, new MouseEvent('fo
o', {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 relat
ed 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 -------- A
1-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 = createTestTree(mode); |
| 106 |
| 107 log = dispatchEventWithLog(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 = createTestTree(mode); |
| 132 |
| 133 log = dispatchEventWithLog(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 pa
th must be correct.'); |
| 137 assert_array_equals(log.relatedTargets, |
| 138 ['B', 'B', 'B', 'B', 'B', 'B', 'B'], 'The related targets mu
st 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 = createTestTree(mode); |
| 158 |
| 159 log = dispatchEventWithLog(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 = createTestTree(mode); |
| 184 |
| 185 log = dispatchEventWithLog(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 corr
ect.'); |
| 191 |
| 192 }, 'Firing an event at B1a with relatedNode at A1a 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 = createTestTree(mode); |
| 212 |
| 213 nodes['A-SR'].removeChild(nodes.A1); |
| 214 log = dispatchEventWithLog(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 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 = createTestTree(mode); |
| 241 |
| 242 nodes['A-SR'].removeChild(nodes.A1); |
| 243 log = dispatchEventWithLog(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 B1a with relatedNode at A1a with ' + mode + '
mode shadow trees'); |
| 249 } |
| 250 |
| 251 testEventAtA1aWithDetachedB1a('open'); |
| 252 testEventAtA1aWithDetachedB1a('closed'); |
| 253 |
| 254 </script> |
| 255 </body> |
| 256 </html> |
| OLD | NEW |