Skip to content
This repository was archived by the owner on Mar 19, 2021. It is now read-only.

Commit e2ee0f7

Browse files
rakinadomenic
rakina
authored and
domenic
committed
Merge pull request #18035 from rakina/focusmethod
HTML: Handle shadow host with delegatesFocus=true in Element.focus(), click and sequential focus navigation
1 parent ae92a87 commit e2ee0f7

7 files changed

+539
-0
lines changed

‎shadow-dom/focus/click-focus-delegatesFocus-click-method.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>HTML Test: click on shadow host with delegatesFocus</title>
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<script src="/resources/testdriver.js"></script>
7+
<script src="/resources/testdriver-vendor.js"></script>
8+
<script src="resources/shadow-utils.js"></script>
9+
10+
<body>
11+
<div id="host">
12+
<div id="slotted">slotted</div>
13+
</div>
14+
<div id="outside">outside</div>
15+
</body>
16+
17+
<script>
18+
const host = document.getElementById("host");
19+
const slotted = document.getElementById("slotted");
20+
21+
const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true });
22+
const aboveSlot = document.createElement("div");
23+
aboveSlot.innerText = "aboveSlot";
24+
const slot = document.createElement("slot");
25+
shadowRoot.appendChild(aboveSlot);
26+
shadowRoot.appendChild(slot);
27+
28+
const elementsInFlatTreeOrder = [host, aboveSlot, slot, slotted, outside];
29+
30+
// Final structure:
31+
// <div #host> (delegatesFocus=true)
32+
// #shadowRoot
33+
// <div #aboveSlot>
34+
// <slot #slot>
35+
// (slotted) <div #slotted>
36+
// <div #outside>
37+
38+
function setAllTabIndex(value) {
39+
setTabIndex(elementsInFlatTreeOrder, value);
40+
}
41+
42+
function removeAllTabIndex() {
43+
removeTabIndex(elementsInFlatTreeOrder);
44+
}
45+
46+
function resetTabIndexAndFocus() {
47+
removeAllTabIndex();
48+
resetFocus(document);
49+
resetFocus(shadowRoot);
50+
}
51+
52+
test(() => {
53+
resetTabIndexAndFocus();
54+
setAllTabIndex(0);
55+
host.click();
56+
assert_equals(shadowRoot.activeElement, null);
57+
assert_equals(document.activeElement, document.body);
58+
}, "call click() on host with delegatesFocus, all tabindex=0");
59+
60+
test(() => {
61+
resetTabIndexAndFocus();
62+
setAllTabIndex(0);
63+
slotted.click();
64+
assert_equals(shadowRoot.activeElement, null);
65+
assert_equals(document.activeElement, document.body);
66+
}, "call click() on slotted element in delegatesFocus shadow tree, all tabindex=0");
67+
</script>

‎shadow-dom/focus/click-focus-delegatesFocus-tabindex-varies.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>HTML Test: click on shadow host with delegatesFocus</title>
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<script src="/resources/testdriver.js"></script>
7+
<script src="/resources/testdriver-vendor.js"></script>
8+
<script src="resources/shadow-utils.js"></script>
9+
10+
<body>
11+
<div id="host">
12+
<div id="slotted">slotted</div>
13+
</div>
14+
<div id="outside">outside</div>
15+
</body>
16+
17+
<script>
18+
const host = document.getElementById("host");
19+
const slotted = document.getElementById("slotted");
20+
21+
const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true });
22+
const aboveSlot = document.createElement("div");
23+
aboveSlot.innerText = "aboveSlot";
24+
const slot = document.createElement("slot");
25+
// Add an unfocusable spacer, because test_driver.click will click on the
26+
// center point of #host, and we don't want the click to land on #aboveSlot
27+
// or #slot.
28+
const spacer = document.createElement("div");
29+
spacer.style = "height: 1000px;";
30+
shadowRoot.appendChild(spacer);
31+
shadowRoot.appendChild(aboveSlot);
32+
shadowRoot.appendChild(slot);
33+
34+
const elementsInFlatTreeOrder = [host, aboveSlot, spacer, slot, slotted, outside];
35+
36+
// Final structure:
37+
// <div #host> (delegatesFocus=true)
38+
// #shadowRoot
39+
// <div #spacer>
40+
// <div #aboveSlot>
41+
// <slot #slot>
42+
// (slotted) <div #slotted>
43+
// <div #outside>
44+
45+
function setAllTabIndex(value) {
46+
setTabIndex(elementsInFlatTreeOrder, value);
47+
}
48+
49+
function removeAllTabIndex() {
50+
removeTabIndex(elementsInFlatTreeOrder);
51+
}
52+
53+
function resetTabIndexAndFocus() {
54+
removeAllTabIndex();
55+
resetFocus(document);
56+
resetFocus(shadowRoot);
57+
}
58+
59+
promise_test(async () => {
60+
resetTabIndexAndFocus();
61+
setTabIndex([aboveSlot], 2);
62+
setTabIndex([slot, slotted], 1);
63+
await test_driver.click(host);
64+
assert_equals(shadowRoot.activeElement, aboveSlot);
65+
assert_equals(document.activeElement, host);
66+
}, "click on host with delegatesFocus, #aboveSlot tabindex = 2, #slot and #slotted tabindex = 1");
67+
68+
</script>

‎shadow-dom/focus/click-focus-delegatesFocus-tabindex-zero.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>HTML Test: click on shadow host with delegatesFocus</title>
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<script src="/resources/testdriver.js"></script>
7+
<script src="/resources/testdriver-vendor.js"></script>
8+
<script src="resources/shadow-utils.js"></script>
9+
10+
<body>
11+
<div id="host">
12+
<div id="slotted">slotted</div>
13+
</div>
14+
<div id="outside">outside</div>
15+
</body>
16+
17+
<script>
18+
const host = document.getElementById("host");
19+
const slotted = document.getElementById("slotted");
20+
21+
const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true });
22+
const aboveSlot = document.createElement("div");
23+
aboveSlot.innerText = "aboveSlot";
24+
const slot = document.createElement("slot");
25+
// Add an unfocusable spacer, because test_driver.click will click on the
26+
// center point of #host, and we don't want the click to land on #aboveSlot
27+
// or #slot.
28+
const spacer = document.createElement("div");
29+
spacer.style = "height: 1000px;";
30+
shadowRoot.appendChild(spacer);
31+
shadowRoot.appendChild(aboveSlot);
32+
shadowRoot.appendChild(slot);
33+
34+
const elementsInFlatTreeOrder = [host, aboveSlot, spacer, slot, slotted, outside];
35+
36+
// Final structure:
37+
// <div #host> (delegatesFocus=true)
38+
// #shadowRoot
39+
// <div #spacer>
40+
// <div #aboveSlot>
41+
// <slot #slot>
42+
// (slotted) <div #slotted>
43+
// <div #outside>
44+
45+
function setAllTabIndex(value) {
46+
setTabIndex(elementsInFlatTreeOrder, value);
47+
}
48+
49+
function removeAllTabIndex() {
50+
removeTabIndex(elementsInFlatTreeOrder);
51+
}
52+
53+
function resetTabIndexAndFocus() {
54+
removeAllTabIndex();
55+
resetFocus(document);
56+
resetFocus(shadowRoot);
57+
}
58+
59+
promise_test(async () => {
60+
resetTabIndexAndFocus();
61+
setAllTabIndex(0);
62+
removeTabIndex([spacer]);
63+
await test_driver.click(host);
64+
assert_equals(shadowRoot.activeElement, aboveSlot);
65+
assert_equals(document.activeElement, host);
66+
}, "click on host with delegatesFocus, all tabindex=0 except spacer");
67+
68+
</script>

0 commit comments

Comments
 (0)