Source code
Revision control
Copy as Markdown
Other Tools
<html>
<head>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script>
class TestNode extends HTMLElement {
constructor() {
super();
const styles = "<style>:focus{background-color:yellow;}</style>";
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML =
`${styles}<div tabindex='-1'>test node</div> <slot></slot>`;
}}
window.customElements.define('test-node', TestNode);
var lastFocusTarget;
function focusLogger(event) {
lastFocusTarget = event.target;
console.log(event.target + " under " + event.target.parentNode);
event.stopPropagation();
}
function testTabbingThroughShadowDOMWithTabIndexes() {
var anchor = document.createElement("a");
anchor.onfocus = focusLogger;
anchor.href = "#";
anchor.textContent = "in light DOM";
document.body.appendChild(anchor);
var host = document.createElement("div");
document.body.appendChild(host);
var sr = host.attachShadow({mode: "open"});
var shadowAnchor = anchor.cloneNode(false);
shadowAnchor.onfocus = focusLogger;
shadowAnchor.textContent = "in shadow DOM";
sr.appendChild(shadowAnchor);
var shadowInput = document.createElement("input");
shadowInput.onfocus = focusLogger;
shadowInput.tabIndex = 1;
sr.appendChild(shadowInput);
var shadowDate = document.createElement("input");
shadowDate.type = "date";
shadowDate.onfocus = focusLogger;
shadowDate.tabIndex = 1;
sr.appendChild(shadowDate);
var shadowIframe = document.createElement("iframe");
shadowIframe.tabIndex = 1;
sr.appendChild(shadowIframe);
shadowIframe.contentDocument.body.innerHTML = "<input>";
var input = document.createElement("input");
input.onfocus = focusLogger;
input.tabIndex = 1;
document.body.appendChild(input);
var input2 = document.createElement("input");
input2.onfocus = focusLogger;
document.body.appendChild(input2);
document.body.offsetLeft;
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input, "Should have focused input element. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, anchor, "Should have focused anchor element. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowInput, "Should have focused input element in shadow DOM. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowDate, "Should have focused date element in shadow DOM. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowDate, "Should have focused date element in shadow DOM. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowDate, "Should have focused date element in shadow DOM. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowDate, "Should have focused date element with a calendar button in shadow DOM. (3)");
let canTabMoveFocusToRootElement =
!SpecialPowers.getBoolPref("dom.disable_tab_focus_to_root_element");
if (canTabMoveFocusToRootElement) {
synthesizeKey("KEY_Tab");
opener.is(shadowIframe.contentDocument.activeElement,
shadowIframe.contentDocument.documentElement,
"Should have focused document element in shadow iframe. (3)");
}
synthesizeKey("KEY_Tab");
opener.is(shadowIframe.contentDocument.activeElement,
shadowIframe.contentDocument.body.firstChild,
"Should have focused input element in shadow iframe. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowAnchor, "Should have focused anchor element in shadow DOM. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input2, "Should have focused input[2] element. (3)");
// Backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowAnchor, "Should have focused anchor element in shadow DOM. (4)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(shadowIframe.contentDocument.activeElement,
shadowIframe.contentDocument.body.firstChild,
"Should have focused input element in shadow iframe. (4)");
if (canTabMoveFocusToRootElement) {
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(shadowIframe.contentDocument.activeElement,
shadowIframe.contentDocument.documentElement,
"Should have focused document element in shadow iframe. (4)");
}
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowDate, "Should have focused date element with a calendar button in shadow DOM. (4)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowDate, "Should have focused date element in shadow DOM. (4)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowDate, "Should have focused date element in shadow DOM. (4)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowDate, "Should have focused date element in shadow DOM. (4)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowInput, "Should have focused input element in shadow DOM. (4)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, anchor, "Should have focused anchor element. (4)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input, "Should have focused input element. (4)");
document.body.innerHTML = null;
}
function testTabbingThroughSimpleShadowDOM() {
var anchor = document.createElement("a");
anchor.onfocus = focusLogger;
anchor.href = "#";
anchor.textContent = "in light DOM";
document.body.appendChild(anchor);
anchor.focus();
var host = document.createElement("div");
document.body.appendChild(host);
var sr = host.attachShadow({mode: "open"});
var shadowAnchor = anchor.cloneNode(false);
shadowAnchor.onfocus = focusLogger;
shadowAnchor.textContent = "in shadow DOM";
sr.appendChild(shadowAnchor);
var shadowInput = document.createElement("input");
shadowInput.onfocus = focusLogger;
sr.appendChild(shadowInput);
var hiddenShadowButton = document.createElement("button");
hiddenShadowButton.setAttribute("style", "display: none;");
sr.appendChild(hiddenShadowButton);
var input = document.createElement("input");
input.onfocus = focusLogger;
document.body.appendChild(input);
var input2 = document.createElement("input");
input2.onfocus = focusLogger;
document.body.appendChild(input2);
document.body.offsetLeft;
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowAnchor, "Should have focused anchor element in shadow DOM.");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowInput, "Should have focused input element in shadow DOM.");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input, "Should have focused input element.");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input2, "Should have focused input[2] element.");
// Backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input, "Should have focused input element. (2)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowInput, "Should have focused input element in shadow DOM. (2)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowAnchor, "Should have focused anchor element in shadow DOM. (2)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, anchor, "Should have focused anchor element. (2)");
host.remove();
input.remove();
input2.remove();
}
function testTabbingThroughNestedShadowDOM() {
opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus. (1)");
var host = document.createElement("div");
host.id = "host";
document.body.appendChild(host);
var sr0 = host.attachShadow({mode: "open"});
sr0.innerHTML = "<button id='button'>X</button><br id='br'><div id='h1'></div><div id='h2'></div>";
var button = sr0.getElementById("button");
button.onfocus = focusLogger;
var h1 = sr0.getElementById("h1");
var sr1 = h1.attachShadow({mode: "open"});
sr1.innerHTML = "h1 <input id='h11' placeholder='click me and press tab'><input id='h12' placeholder='and then tab again'>";
var input11 = sr1.getElementById("h11");
input11.onfocus = focusLogger;
var input12 = sr1.getElementById("h12");
input12.onfocus = focusLogger;
var h2 = sr0.getElementById("h2");
var sr2 = h2.attachShadow({mode: "open"});
sr2.innerHTML = "h2 <input id='h21'><input id='h22'>";
var input21 = sr2.getElementById("h21");
input21.onfocus = focusLogger;
var input22 = sr2.getElementById("h22");
input22.onfocus = focusLogger;
document.body.offsetLeft;
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, button, "[nested shadow] Should have focused button element. (1)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input11, "[nested shadow] Should have focused input element. (1)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input12, "[nested shadow] Should have focused input element. (2)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input21, "[nested shadow] Should have focused input element. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input22, "[nested shadow] Should have focused input element. (4)");
// Backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input21, "[nested shadow] Should have focused input element. (5)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input12, "[nested shadow] Should have focused input element. (6)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input11, "[nested shadow] Should have focused input element. (7)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, button, "[nested shadow] Should have focused button element. (8)");
// Back to beginning, outside of Shadow DOM.
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus. (2)");
host.remove();
}
function testTabbingThroughDisplayContentsHost() {
opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus. (1)");
var host = document.createElement("div");
host.id = "host";
host.setAttribute("style", "display: contents; border: 1px solid black;");
document.body.appendChild(host);
var sr0 = host.attachShadow({mode: "open"});
sr0.innerHTML = "<input id='shadowInput1'><input id='shadowInput2'>";
var shadowInput1 = sr0.getElementById("shadowInput1");
shadowInput1.onfocus = focusLogger;
var shadowInput2 = sr0.getElementById("shadowInput2");
shadowInput2.onfocus = focusLogger;
var host1 = document.createElement("div");
host1.id = "host";
host1.tabIndex = 0;
host1.setAttribute("style", "display: contents; border: 1px solid black;");
document.body.appendChild(host1);
var sr1 = host1.attachShadow({mode: "open"});
sr1.innerHTML = "<input id='shadowInput1'><input id='shadowInput2'>";
var shadowInput3 = sr1.getElementById("shadowInput1");
shadowInput3.onfocus = focusLogger;
var shadowInput4 = sr1.getElementById("shadowInput2");
shadowInput4.onfocus = focusLogger;
document.body.offsetLeft;
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowInput1, "Should have focused input element. (1)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowInput2, "Should have focused input element. (2)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowInput3, "Should have focused input element. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowInput4, "Should have focused input element. (4)");
// Backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowInput3, "Should have focused input element. (5)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowInput2, "Should have focused input element. (6)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowInput1, "Should have focused input element. (7)");
// Back to beginning, outside of Shadow DOM.
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus. (2)");
host.remove();
host1.remove();
}
function testTabbingThroughLightDOMShadowDOMLightDOM() {
opener.is(document.activeElement, document.body.firstChild,
"body's first child should have focus.");
var host = document.createElement("span");
host.innerHTML = "\n";
host.id = "host";
document.body.appendChild(host);
var sr0 = host.attachShadow({mode: "open"});
sr0.innerHTML = document.getElementById("template").innerHTML;
var p1 = sr0.getElementById("p1");
p1.onfocus = focusLogger;
var p2 = sr0.getElementById("p2");
p2.onfocus = focusLogger;
var p = document.createElement("p");
p.innerHTML = " <a href='#p'>link 1</a> ";
var a = p.firstElementChild;
a.onfocus = focusLogger;
document.body.appendChild(p);
document.body.offsetLeft;
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, p1, "Should have focused p1.");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, p2, "Should have focused p2.");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, a, "Should have focused a.");
// Backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, p2, "Should have focused p2.");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, p1, "Should have focused p1.");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, document.body.firstChild,
"body's first child should have focus.");
host.remove();
p.remove();
}
function testFocusableHost() {
opener.is(document.activeElement, document.body.firstChild,
"body's first child should have focus.");
var host = document.createElement("div");
host.id = "host";
host.tabIndex = 0;
host.onfocus = focusLogger;
document.body.appendChild(host);
var slotted = document.createElement("div");
slotted.tabIndex = 0;
slotted.onfocus = focusLogger;
host.appendChild(slotted);
var sr0 = host.attachShadow({mode: "open"});
sr0.appendChild(document.createElement("slot"));
var p = document.createElement("p");
p.innerHTML = " <a href='#p'>link 1</a> ";
var a = p.firstElementChild;
a.onfocus = focusLogger;
document.body.appendChild(p);
document.body.offsetLeft;
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, host, "Should have focused host.");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, slotted, "Should have focused slotted.");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, a, "Should have focused a.");
// Backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, slotted, "Should have focused slotted.");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, host, "Should have focused host.");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, document.body.firstChild,
"body's first child should have focus.");
host.remove();
p.remove();
}
function testShiftTabbingThroughFocusableHost() {
opener.is(document.activeElement, document.body.firstChild,
"body's first child should have focus.");
var host = document.createElement("div");
host.id = "host";
host.tabIndex = 0;
host.onfocus = focusLogger;
document.body.appendChild(host);
var sr = host.attachShadow({mode: "open"});
var shadowButton = document.createElement("button");
shadowButton.innerText = "X";
shadowButton.onfocus = focusLogger;
sr.appendChild(shadowButton);
var shadowInput = document.createElement("input");
shadowInput.onfocus = focusLogger;
sr.appendChild(shadowInput);
sr.appendChild(document.createElement("br"));
var input = document.createElement("input");
input.onfocus = focusLogger;
document.body.appendChild(input);
document.body.offsetLeft;
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, host, "Should have focused host element. (1)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowButton, "Should have focused button element in shadow DOM. (2)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, shadowInput, "Should have focused input element in shadow DOM. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input, "Should have focused input element. (4)");
// Backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowInput, "Should have focused input element in shadow DOM. (5)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, shadowButton, "Should have focused button element in shadow DOM. (6)");
synthesizeKey("KEY_Tab", {shiftKey: true});
// focus is already on host
opener.is(sr.activeElement, null,
"Focus should have left button element in shadow DOM. (7)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, document.body.firstChild,
"body's first child should have focus.");
host.remove();
input.remove();
}
function testTabbingThroughNestedSlot() {
opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus.");
var host0 = document.createElement("div");
var sr0 = host0.attachShadow({mode: "open"});
sr0.innerHTML = "<slot></slot>";
document.body.appendChild(host0);
// focusable
var host00 = document.createElement("div");
var sr00 = host00.attachShadow({mode: "open"});
var div00 = document.createElement("div");
div00.tabIndex = 0;
div00.onfocus = focusLogger;
sr00.appendChild(div00);
host0.appendChild(host00);
// not focusable
var host01 = document.createElement("div");
var sr01 = host01.attachShadow({mode: "open"});
sr01.innerHTML = "<div></div>";
host0.appendChild(host01);
// focusable
var host02 = document.createElement("div");
var sr02 = host02.attachShadow({mode: "open"});
var div02 = document.createElement("div");
div02.tabIndex = 0;
div02.onfocus = focusLogger;
sr02.appendChild(div02);
host0.appendChild(host02);
var host1 = document.createElement("div");
var sr1 = host1.attachShadow({mode: "open"});
sr1.innerHTML = "<slot></slot>";
document.body.appendChild(host1);
var host10 = document.createElement("div");
var sr10 = host10.attachShadow({mode: "open"});
sr10.innerHTML = "<slot></slot>";
host1.appendChild(host10);
var input10 = document.createElement("input");
input10.onfocus = focusLogger;
host10.appendChild(input10);
var host11 = document.createElement("div");
var sr11 = host11.attachShadow({mode: "open"});
sr11.innerHTML = "<slot></slot>";
host1.appendChild(host11);
var input11 = document.createElement("input");
input11.onfocus = focusLogger;
host11.appendChild(input11);
document.body.offsetLeft;
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, div00, "Should have focused div element in shadow DOM. (1)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, div02, "Should have focused div element in shadow DOM. (2)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input10, "Should have focused input element in shadow DOM. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input11, "Should have focused button element in shadow DOM. (4)");
// Backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input10, "Should have focused input element in shadow DOM. (5)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, div02, "Should have focused input element in shadow DOM. (6)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, div00, "Should have focused input element in shadow DOM. (7)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, document.body.firstChild,
"body's first child should have focus.");
host0.remove();
host1.remove();
}
function testTabbingThroughSlotInLightDOM() {
opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus.");
var input0 = document.createElement("input");
input0.onfocus = focusLogger;
document.body.appendChild(input0);
var slot1 = document.createElement("slot");
document.body.appendChild(slot1);
var input10 = document.createElement("input");
input10.onfocus = focusLogger;
slot1.appendChild(input10);
var input11 = document.createElement("input");
input11.onfocus = focusLogger;
slot1.appendChild(input11);
var input2 = document.createElement("input");
input2.onfocus = focusLogger;
document.body.appendChild(input2);
document.body.offsetLeft;
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input0, "Should have focused input element. (1)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input10, "Should have focused input element in slot. (2)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input11, "Should have focused input element in slot. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input2, "Should have focused input element. (4)");
// Backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input11, "Should have focused input element in slot. (5)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input10, "Should have focused input element in slot. (6)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input0, "Should have focused input element. (7)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, document.body.firstChild,
"body's first child should have focus.");
input0.remove();
slot1.remove();
input2.remove();
}
function testTabbingThroughFocusableSlotInLightDOM() {
opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus.");
var slot0 = document.createElement("slot");
slot0.tabIndex = 0;
slot0.setAttribute("style", "display: inline;");
slot0.onfocus = focusLogger;
document.body.appendChild(slot0);
var slot00 = document.createElement("slot");
slot00.tabIndex = 0;
slot00.setAttribute("style", "display: inline;");
slot00.onfocus = focusLogger;
slot0.appendChild(slot00);
var input000 = document.createElement("input");
input000.onfocus = focusLogger;
slot00.appendChild(input000);
var input01 = document.createElement("input");
input01.onfocus = focusLogger;
slot0.appendChild(input01);
var input1 = document.createElement("input");
input1.onfocus = focusLogger;
document.body.appendChild(input1);
document.body.offsetLeft;
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, slot0, "Should have focused slot element. (1)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, slot00, "Should have focused slot element. (2)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input000, "Should have focused input element in slot. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input01, "Should have focused input element in slot. (4)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input1, "Should have focused input element. (5)");
// Backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input01, "Should have focused input element in slot. (6)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input000, "Should have focused input element in slot. (7)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, slot00, "Should have focused slot element. (8)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, slot0, "Should have focused slot element. (9)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, document.body.firstChild,
"body's first child should have focus.");
slot0.remove();
input1.remove();
}
function testTabbingThroughScrollableShadowDOM() {
opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus.");
var host0 = document.createElement("div");
host0.setAttribute("style", "height: 50px; overflow: auto;");
host0.onfocus = focusLogger;
document.body.appendChild(host0);
var sr0 = host0.attachShadow({mode: "open"});
sr0.innerHTML = `
<style>
div,slot {
height: 30px;
display: block;
overflow: auto;
}
input {
display: block;
}
</style>
`;
var input00 = document.createElement("input");
input00.setAttribute("style", "background-color: red;");
input00.onfocus = focusLogger;
sr0.appendChild(input00);
var container01 = document.createElement("div");
container01.onfocus = focusLogger;
sr0.appendChild(container01);
var input010 = document.createElement("input");
input010.onfocus = focusLogger;
container01.appendChild(input010);
var input011 = document.createElement("input");
input011.onfocus = focusLogger;
container01.appendChild(input011);
var slot02 = document.createElement("slot");
slot02.onfocus = focusLogger;
sr0.appendChild(slot02);
var input020 = document.createElement("input");
input020.setAttribute("style", "display: block;");
input020.onfocus = focusLogger;
host0.appendChild(input020);
var input021 = document.createElement("input");
input021.setAttribute("style", "display: block;");
input021.onfocus = focusLogger;
host0.appendChild(input021);
var input1 = document.createElement("input");
input1.onfocus = focusLogger;
document.body.appendChild(input1);
document.body.offsetLeft;
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, host0, "Should have focused shadow host element. (1)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input00, "Should have focused input element in shadow dom. (2)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, container01, "Should have focused scrollable element in shadow dom. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input010, "Should have focused input element in shadow dom. (4)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input011, "Should have focused input element in shadow dom. (5)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, slot02, "Should have focused slot element in shadow dom. (6)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input020, "Should have focused input element in slot. (7)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input021, "Should have focused input element in slot. (8)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, input1, "Should have focused input element in light dom. (9)");
// Backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input021, "Should have focused input element in slot. (10)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input020, "Should have focused input element in slot. (11)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, slot02, "Should have focused slot element in shadow dom. (12)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input011, "Should have focused input element in shadow dom. (13)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input010, "Should have focused input element in shadow dom. (14)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, container01, "Should have focused scrollable element in shadow dom. (15)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, input00, "Should have focused input element in shadow dom. (16)");
synthesizeKey("KEY_Tab", {shiftKey: true});
// focus is already on host
opener.is(sr0.activeElement, null,
"Focus should have left input element in shadow DOM. (7)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, document.body.firstChild,
"body's first child should have focus.");
host0.remove();
input1.remove();
}
function testTabbingThroughScrollableShadowHost() {
opener.is(document.activeElement, document.body.firstChild,
"body's first child should have focus.");
let aboveFirstHost = document.createElement("div");
aboveFirstHost.tabIndex = 0;
aboveFirstHost.onfocus = focusLogger;
document.body.appendChild(aboveFirstHost);
let firstHost = document.createElement("div");
firstHost.style = "overflow: scroll";
document.body.appendChild(firstHost);
let firstShadow = firstHost.attachShadow({mode: "open"});
let divInFirstShadow = document.createElement("div");
divInFirstShadow.tabIndex = 0;
divInFirstShadow.onfocus = focusLogger;
firstShadow.appendChild(divInFirstShadow);
let aboveSecondHost = document.createElement("div");
aboveSecondHost.tabIndex = 0;
aboveSecondHost.onfocus = focusLogger;
document.body.appendChild(aboveSecondHost);
let secondHost = document.createElement("div");
secondHost.style = "overflow: scroll";
secondHost.tabIndex = 0;
secondHost.onfocus = focusLogger;
document.body.appendChild(secondHost);
let secondShadow = secondHost.attachShadow({mode: "open"});
let divInSecondShadow = document.createElement("div");
divInSecondShadow.tabIndex = 0;
divInSecondShadow.onfocus = focusLogger;
secondShadow.appendChild(divInSecondShadow);
let belowSecondHost = document.createElement("div");
belowSecondHost.tabIndex = 0;
belowSecondHost.onfocus = focusLogger;
document.body.appendChild(belowSecondHost);
document.body.offsetLeft;
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, aboveFirstHost, "Should have focused div above first host element. (1)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, divInFirstShadow, "Should have focused div in first shadow dom. (2)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, aboveSecondHost, "Should have focused div above second host element. (3)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, secondHost, "Should have focused second host element. (4)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, divInSecondShadow, "Should have focused div in second shadow dom. (5)");
synthesizeKey("KEY_Tab");
opener.is(lastFocusTarget, belowSecondHost, "Should have focused div below second host. (6)");
// Backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, divInSecondShadow, "Should have focused div in second shadow dom. (7)");
synthesizeKey("KEY_Tab", {shiftKey: true});
// focus is already on second host, so lastFocusTarget won't get updated.
opener.is(document.activeElement, secondHost, "Should have focused second host element. (8)");
opener.is(secondShadow.activeElement, null, "Focus should have left div in second shadow dom. (8)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, aboveSecondHost, "Should have focused div above second host element. (9)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, divInFirstShadow, "Should have focused div in first shadow dom. (10)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(lastFocusTarget, aboveFirstHost, "Should have focused div above first host element. (11)");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, document.body.firstChild,
"body's first child should have focus.");
aboveFirstHost.remove();
firstHost.remove();
aboveSecondHost.remove();
secondHost.remove();
belowSecondHost.remove();
}
function testDeeplyNestedShadowTree() {
opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus.");
var host1 = document.createElement("test-node");
var lastHost = host1;
for (var i = 0; i < 20; ++i) {
lastHost.appendChild(document.createElement("test-node"));
lastHost = lastHost.firstChild;
}
var input = document.createElement("input");
document.body.appendChild(host1);
document.body.appendChild(input);
document.body.offsetLeft;
// Test shadow tree which doesn't have anything tab-focusable.
host1.shadowRoot.querySelector("div").focus();
synthesizeKey("KEY_Tab");
is(document.activeElement, input, "Should have focused input element.");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus.");
// Same test but with focusable elements in the tree...
var input2 = document.createElement("input");
var host2 = host1.firstChild;
var host3 = host2.firstChild;
host2.insertBefore(input2, host3);
var input3 = document.createElement("input");
lastHost.appendChild(input3);
document.body.offsetLeft;
host3.shadowRoot.querySelector("div").focus();
synthesizeKey("KEY_Tab");
is(document.activeElement, input3, "Should have focused input3 element.");
// ...and backwards
host3.shadowRoot.querySelector("div").focus();
synthesizeKey("KEY_Tab", {shiftKey: true});
is(document.activeElement, input2, "Should have focused input2 element.");
// Remove elements added to body element.
host1.remove();
input.remove();
// Tests expect body.firstChild to have focus.
document.body.firstChild.focus();
}
function testBackwardsTabbingWithSlotsWithoutFocusableContent() {
let first = document.createElement("div");
first.tabIndex = 0;
let host = document.createElement("div");
host.tabIndex = 0;
let second = document.createElement("div");
second.tabIndex = 0;
host.appendChild(document.createTextNode("foo"));
host.attachShadow({ mode: "open" }).innerHTML = `<slot></slot>`;
document.body.appendChild(first);
document.body.appendChild(host);
document.body.appendChild(second);
document.body.offsetLeft;
first.focus();
opener.is(document.activeElement, first, "First light div should have focus");
synthesizeKey("KEY_Tab");
opener.is(document.activeElement, host, "Host should be focused");
synthesizeKey("KEY_Tab");
opener.is(document.activeElement, second, "Second light div should be focused");
// Now backwards
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, host, "Focus should return to host");
synthesizeKey("KEY_Tab", {shiftKey: true});
opener.is(document.activeElement, first, "Focus should return to first light div");
second.remove();
host.remove();
first.remove();
}
function runTest() {
testTabbingThroughShadowDOMWithTabIndexes();
testTabbingThroughSimpleShadowDOM();
testTabbingThroughNestedShadowDOM();
testTabbingThroughDisplayContentsHost();
testTabbingThroughLightDOMShadowDOMLightDOM();
testFocusableHost();
testShiftTabbingThroughFocusableHost();
testTabbingThroughNestedSlot();
testTabbingThroughSlotInLightDOM();
testTabbingThroughFocusableSlotInLightDOM();
testTabbingThroughScrollableShadowDOM();
testTabbingThroughScrollableShadowHost();
testDeeplyNestedShadowTree();
testBackwardsTabbingWithSlotsWithoutFocusableContent();
opener.didRunTests();
window.close();
}
function init() {
SimpleTest.waitForFocus(runTest);
}
</script>
<style>
</style>
<template id="template">
<div style="overflow: hidden">
<p tabindex="0" id="p1">component</p>
<p tabindex="0" id="p2">/component</p>
</div>
</template>
</head>
<body onload="init()">
</body>
</html>