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
73
74
75
76
77
78
79
80
|
// Structure:
// <div #aboveHost>
// <div #host>
// #shadowRoot
// <div #aboveSlot>
// <slot #slotAbove>
// (slotted) <div #slottedAbove>
// <slot #slotBelow>
// (slotted) <div #slottedBelow>
// <div #belowSlot>
// <div #belowHost>
function prepareDOM(container, delegatesFocus) {
const aboveHost = document.createElement("div");
aboveHost.innerText = "aboveHost";
const host = document.createElement("div");
host.id = "host";
const slottedBelow = document.createElement("div");
slottedBelow.innerText = "slotted below";
slottedBelow.slot = "below";
const slottedAbove = document.createElement("div");
slottedAbove.innerText = "slotted above";
slottedAbove.slot = "above";
const belowHost = document.createElement("div");
belowHost.innerText = "belowHost";
container.appendChild(aboveHost);
container.appendChild(host);
container.appendChild(belowHost);
host.appendChild(slottedBelow);
host.appendChild(slottedAbove);
const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: delegatesFocus});
const aboveSlot = document.createElement("div");
aboveSlot.innerText = "aboveSlot";
const slotAbove = document.createElement("slot");
slotAbove.name = "above";
const slotBelow = document.createElement("slot");
slotBelow.name = "below";
const belowSlot = document.createElement("div");
belowSlot.innerText = "belowSlot";
shadowRoot.appendChild(aboveSlot);
shadowRoot.appendChild(slotAbove);
shadowRoot.appendChild(slotBelow);
shadowRoot.appendChild(belowSlot);
return [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost];
}
function setTabIndex(elements, value) {
for (const el of elements) {
el.tabIndex = value;
}
}
function removeTabIndex(elements) {
for (const el of elements) {
el.removeAttribute("tabindex");
}
}
function resetFocus(root = document) {
if (root.activeElement)
root.activeElement.blur();
}
function navigateFocusForward() {
// TAB = '\ue004'
return test_driver.send_keys(document.body, "\ue004");
}
async function assertFocusOrder(expectedOrder) {
const shadowRoot = document.getElementById("host").shadowRoot;
for (const el of expectedOrder) {
await navigateFocusForward();
const focused = shadowRoot.activeElement ? shadowRoot.activeElement : document.activeElement;
assert_equals(focused, el);
}
}
|
