1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that cycling focus with keyboard (via TAB key) in slotted nodes works.
const TEST_URL = `data:text/html;charset=utf-8,
<test-component>
<div slot="slot1" id="el1">slot1-1</div>
</test-component>
<script>
'use strict';
customElements.define('test-component', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<slot name="slot1"></slot>';
}
});
</script>`;
add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
const { markup } = inspector;
const win = inspector.markup.doc.defaultView;
info("Find and expand the test-component shadow DOM host.");
const hostFront = await getNodeFront("test-component", inspector);
const hostContainer = markup.getContainer(hostFront);
await expandContainer(inspector, hostContainer);
info("Expand the shadow root");
const shadowRootContainer = hostContainer.getChildContainers()[0];
await expandContainer(inspector, shadowRootContainer);
info("Expand the slot");
const slotContainer = shadowRootContainer.getChildContainers()[0];
await expandContainer(inspector, slotContainer);
info("Select the slotted container for the element");
const node = slotContainer.getChildContainers()[0].node;
const container = inspector.markup.getContainer(node, true);
await selectNode(node, inspector, "no-reason", true);
const root = inspector.markup.getContainer(inspector.markup._rootNode);
root.elt.focus();
const tagSpan = container.elt.querySelector(".tag");
const revealLink = container.elt.querySelector(".reveal-link");
info("Hit Enter to focus on the first element");
let tagFocused = once(tagSpan, "focus");
EventUtils.synthesizeAndWaitKey("KEY_Enter", {}, win);
await tagFocused;
info("Hit Tab to focus on the next element");
const linkFocused = once(revealLink, "focus");
EventUtils.synthesizeKey("KEY_Tab", {}, win);
await linkFocused;
info("Hit Tab again to cycle focus to the first element");
tagFocused = once(tagSpan, "focus");
EventUtils.synthesizeKey("KEY_Tab", {}, win);
await tagFocused;
Assert.strictEqual(
inspector.markup.doc.activeElement,
tagSpan,
"Focus has gone back to first element"
);
});
|
