Google Git
Sign in
chromium / external / w3c / web-platform-tests / fd0429f0b45f975b25d85256dac33762134952c5 / . / shadow-dom / event-with-related-target.html
blob: 77da4476025fb6160f34efb1df9cfd87226cda02 [file] [log] [blame]
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]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 () {
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]27 var nodes = createFixedTestTree(mode);
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]28
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]29 log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1}));
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]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 () {
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]53 var nodes = createFixedTestTree(mode);
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]54
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]55 log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1b1}));
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]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 () {
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]79 var nodes = createFixedTestTree(mode);
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]80
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]81 log = dispatchEventWithEventLog(nodes, nodes.B1b1, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1a}));
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]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 () {
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]105 var nodes = createFixedTestTree(mode);
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]106
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]107 log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.D1}));
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]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 () {
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]131 var nodes = createFixedTestTree(mode);
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]132
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]133 log = dispatchEventWithEventLog(nodes, nodes.D1, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1a}));
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]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 () {
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]157 var nodes = createFixedTestTree(mode);
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]158
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]159 log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.A1a}));
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]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 () {
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]183 var nodes = createFixedTestTree(mode);
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]184
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]185 log = dispatchEventWithEventLog(nodes, nodes.A1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1a}));
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]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
jugglinmike5e583e12017-02-10 04:02:57[diff] [blame]192 }, 'Firing an event at A1a with relatedNode at B1a with ' + mode + ' mode shadow trees');
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]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 () {
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]211 var nodes = createFixedTestTree(mode);
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]212
213 nodes['A-SR'].removeChild(nodes.A1);
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]214 log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.A1a}));
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]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
jugglinmike5e583e12017-02-10 04:02:57[diff] [blame]221 }, 'Firing an event at B1a with relatedNode at A1a (detached) with ' + mode + ' mode shadow trees');
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]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 () {
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]240 var nodes = createFixedTestTree(mode);
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]241
242 nodes['A-SR'].removeChild(nodes.A1);
Eriko Kurimoto1b8c3912017-10-06 09:28:50[diff] [blame]243 log = dispatchEventWithEventLog(nodes, nodes.A1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1a}));
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]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
jugglinmike5e583e12017-02-10 04:02:57[diff] [blame]248 }, 'Firing an event at A1a with relatedNode at B1a (detached) with ' + mode + ' mode shadow trees');
Ryosuke Niwaa53a9bc2016-09-21 13:39:32[diff] [blame]249 }
250
251 testEventAtA1aWithDetachedB1a('open');
252 testEventAtA1aWithDetachedB1a('closed');
253
254 </script>
255 </body>
256</html>