1cae447ae509235ca31aba991e6ddc2e1f902259
[WebKit-https.git] / LayoutTests / fast / shadow-dom / event-path-with-window.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Shadow DOM: Extensions to Event Interface</title>
5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
6 <meta name="assert" content="Event interface must have composedPath() as a method">
7 <link rel="help" href="http://w3c.github.io/webcomponents/spec/shadow/#extensions-to-event-interface">
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 window.label = 'window';
17 document.label = 'document';
18 document.documentElement.label = 'html';
19 document.body.label = 'body';
20
21 // FIXME: Add a test for trimming event path.
22
23 /*
24 -SR: ShadowRoot  -S: Slot  target: (~)  *: indicates start  digit: event path order
25 A ------------------------------- A-SR
26 + B ------------ B-SR             + A1 ------ A1-SR (1)
27   + C            + B1 --- B1-SR   + A2-S      + A1a (*; 0)
28   + D --- D-SR     + B1a    + B1b --- B1b-SR
29           + D1              + B1c-S   + B1b1
30                                       + B1b2
31 */
32
33 function testEventTargetAfterDispatching(mode) {
34     test(() => {
35         const nodes = createTestTree(mode);
36         const log = dispatchEventWithLog(nodes, nodes.A1a, new Event('my-event', {composed: false, bubbles: true}));
37
38         const expectedPath = ['A1a', 'A1-SR'];
39         assert_array_equals(log.eventPath, expectedPath);
40         assert_array_equals(log.eventPath.length, log.pathAtTargets.length);
41         assert_array_equals(log.pathAtTargets[0], expectedPath);
42         assert_array_equals(log.pathAtTargets[1], expectedPath);
43
44         assert_equals(log.event.target, nodes.A1a);
45         assert_equals(log.event.currentTarget, null);
46     }, 'The event must propagate out of ' + mode + ' mode shadow boundaries when the composed flag is set');
47 }
48
49 testEventTargetAfterDispatching('open');
50 testEventTargetAfterDispatching('closed');
51
52 /*
53 -SR: ShadowRoot  -S: Slot  target: (~)  *: indicates start  digit: event path order
54 window (7)
55  + document (6)
56    + body (5)
57      + A (4) --------------------------- A-SR (3)
58        + B ------------ B-SR             + A1 (2) --- A1-SR (1)
59          + C            + B1 --- B1-SR   + A2-S       + A1a (*; 0)
60          + D --- D-SR     + B1a    + B1b --- B1b-SR
61                  + D1              + B1c-S   + B1b1
62                                              + B1b2
63 */
64
65 function testComposedEventInDocument(mode) {
66     test(() => {
67         const nodes = createTestTree(mode);
68         document.body.appendChild(nodes.A);
69
70         const log = dispatchEventWithLog(nodes, nodes.A1a, new Event('my-event', {composed: true, bubbles: true}));
71         let expectedPath = ['A1a', 'A1-SR', 'A1', 'A-SR', 'A', 'body', 'html', 'document', 'window'];
72
73         assert_array_equals(log.eventPath, expectedPath);
74         assert_array_equals(log.eventPath.length, log.pathAtTargets.length);
75         assert_array_equals(log.pathAtTargets[0], expectedPath);
76         assert_array_equals(log.pathAtTargets[1], expectedPath);
77         if (mode != 'open')
78             expectedPath = expectedPath.slice(expectedPath.indexOf('A1'));
79         assert_array_equals(log.pathAtTargets[2], expectedPath);
80         assert_array_equals(log.pathAtTargets[3], expectedPath);
81         if (mode != 'open')
82             expectedPath = expectedPath.slice(expectedPath.indexOf('A'));
83         assert_array_equals(log.pathAtTargets[4], expectedPath);
84         assert_array_equals(log.pathAtTargets[5], expectedPath);
85         assert_array_equals(log.pathAtTargets[6], expectedPath);
86         assert_array_equals(log.pathAtTargets[7], expectedPath);
87
88         assert_equals(log.event.target, nodes.A);
89         assert_equals(log.event.currentTarget, null);
90     }, 'The event must propagate out of ' + mode + ' mode shadow boundaries when the composed flag is set');
91 }
92
93 testComposedEventInDocument('open');
94 testComposedEventInDocument('closed');
95
96 /*
97 -SR: ShadowRoot  -S: Slot  target: (~)  relatedTarget: [~]  *: indicates start  digit: event path order
98 window
99  + document
100    + body
101      + A ------------------------------- A-SR (3)
102        + B ------------ B-SR             + A1 (2) -------- A1-SR (1)
103          + C            + B1 --- B1-SR   + A2-S [*; 0-3]   + A1a (*; 0)
104          + D --- D-SR     + B1a    + B1b --- B1b-SR
105                  + D1              + B1c-S   + B1b1
106                                              + B1b2
107 */
108
109 function testComposedEventWithRelatedTargetInDocument(mode) {
110     test(() => {
111         const nodes = createTestTree(mode);
112         document.body.appendChild(nodes.A);
113
114         const log = dispatchEventWithLog(nodes, nodes.A1a, new MouseEvent('foo', {composed: true, bubbles: true, relatedTarget: nodes['A2-S']}));
115         let expectedPath = ['A1a', 'A1-SR', 'A1', 'A-SR'];
116
117         assert_array_equals(log.eventPath, expectedPath);
118         assert_array_equals(log.eventPath.length, log.pathAtTargets.length);
119         assert_array_equals(log.pathAtTargets[0], expectedPath);
120         assert_array_equals(log.pathAtTargets[1], expectedPath);
121         if (mode != 'open')
122             expectedPath = expectedPath.slice(expectedPath.indexOf('A1'));
123         assert_array_equals(log.pathAtTargets[2], expectedPath);
124         assert_array_equals(log.pathAtTargets[3], expectedPath);
125         assert_array_equals(log.relatedTargets, ['A2-S', 'A2-S', 'A2-S', 'A2-S']);
126     }, 'The event must not propagate out of ' + mode + ' mode shadow tree in which the relative target and the relative related target are the same');
127 }
128
129 testComposedEventWithRelatedTargetInDocument('open');
130 testComposedEventWithRelatedTargetInDocument('closed');
131
132 </script>
133 </body>
134 </html>