[Shadow DOM] Make createDOM() function used in testing Shadow DOM more flexible.
[WebKit-https.git] / LayoutTests / fast / dom / shadow / access-key.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../../js/resources/js-test-pre.js"></script>
5 <script src="resources/create-dom.js"></script>
6 </head>
7 <body>
8 <p id="description"></p>
9 <div id="sandbox"></div>
10 <pre id="console"></pre>
11 <script>
12 description("Tests to ensure that accesskey works in regard to shadow DOM boundary. Can only run within DRT.");
13
14 function pressAccessKey(key)
15 {
16     if (navigator.userAgent.search(/\bMac OS X\b/) != -1)
17         modifiers = ["ctrlKey", "altKey"];
18     else
19         modifiers = ["altKey"];
20     eventSender.keyDown(key, modifiers);
21 }
22
23 var eventRecords = {};
24
25 function clearEventRecords()
26 {
27     eventRecords = {};
28 }
29
30 function dispatchedEvent(eventType)
31 {
32     var events = eventRecords[eventType];
33     if (!events)
34         return [];
35     return events;
36 }
37
38 function recordEvent(event)
39 {
40     var eventType = event.type
41     if (!eventRecords[eventType]) {
42         eventRecords[eventType] = []
43     }
44     eventRecords[eventType].push(event.target.id);
45 }
46
47 function getElementInShadow(path)
48 {
49     var ids = path.split('/');
50     var element = document.getElementById(ids[0]);
51     for (var i = 1; element != null && i < ids.length; ++i) {
52         var shadowRoot = internals.shadowRoot(element);
53         element = internals.getElementByIdInShadowRoot(shadowRoot, ids[i]);
54     }
55     return element;
56 }
57
58 function prepareDOMTree(parent)
59 {
60     parent.appendChild(
61         createDOM('div', {'id': 'divA'},
62                   createDOM('input', {'id': 'inputB'}),
63                   createDOM('div', {'id': 'shadowC', 'tabindex': 0},
64                             createShadowRoot(
65                                 createDOM('input', {'id': 'inputD'}),
66                                 createDOM('input', {'id': 'inputE', 'accesskey': 'a'}),
67                                 createDOM('div', {'id': 'shadowF', 'tabindex': 0},
68                                           createShadowRoot(
69                                               createDOM('input', {'id': 'inputG'})))))));
70
71     var ids = ['inputB',
72                'shadowC/inputD', 'shadowC/inputE',
73                'shadowC/shadowF/inputG'];
74     for (var i = 0; i < ids.length; ++i) {
75         var element = getElementInShadow(ids[i]);
76         element.addEventListener('focus', recordEvent, false);
77     }
78 }
79
80 function test()
81 {
82     if (window.layoutTestController)
83         layoutTestController.dumpAsText();
84
85     prepareDOMTree(document.getElementById('sandbox'));
86
87     // Please see the discussion of https://bugs.webkit.org/show_bug.cgi?id=67096.
88     // We don't have a clear idea how accesskey should work in regard to shadow DOM.
89     // In current implementation, accesskeys defined inside of components are exposed to an outer document.
90     // Every accesskeys are flattened per each document.
91     document.getElementById('inputB').focus();
92     clearEventRecords();
93     pressAccessKey('a');
94     shouldBe('dispatchedEvent("focus")', '["inputE"]');
95
96     getElementInShadow('shadowC/inputD').focus();
97     clearEventRecords();
98     pressAccessKey('a');
99     shouldBe('dispatchedEvent("focus")', '["inputE"]');
100
101     getElementInShadow('shadowC/shadowF/inputG').focus();
102     clearEventRecords();
103     pressAccessKey('a');
104     shouldBe('dispatchedEvent("focus")', '["inputE"]');
105 }
106
107 test();
108 </script>
109 <script src="../../js/resources/js-test-post.js"></script>
110 </body>
111 </html>