summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/shadow-dom/focus/focus-autofocus.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
commit6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
treea68f146d7fa01f0134297619fbe7e33db084e0aa /testing/web-platform/tests/shadow-dom/focus/focus-autofocus.html
parentInitial commit. (diff)
downloadthunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz
thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/focus/focus-autofocus.html')
-rw-r--r--testing/web-platform/tests/shadow-dom/focus/focus-autofocus.html338
1 files changed, 338 insertions, 0 deletions
diff --git a/testing/web-platform/tests/shadow-dom/focus/focus-autofocus.html b/testing/web-platform/tests/shadow-dom/focus/focus-autofocus.html
new file mode 100644
index 0000000000..75a50b84c6
--- /dev/null
+++ b/testing/web-platform/tests/shadow-dom/focus/focus-autofocus.html
@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="author" title="Sean Feng" href="mailto:sefeng@mozilla.com">
+<meta name="assert" content="Elements with autofocus should have high precedence over other elements for delegates focus">
+<link rel="help" href="https://github.com/whatwg/html/pull/6990">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/shadow-utils.js"></script>
+</head>
+
+<body>
+ <script>
+ function createShadowDOMTree() {
+ // <div #host> (delegatesFocus = true)
+ // #shadowRoot
+ // <div #firstOuterDiv>
+ // <div #innertHost>
+ // #shadowRoot
+ // <div #firstInnerDiv>
+ // <div #secondInnerDiv>
+ // <div #secondOuterDiv>
+ const host = document.createElement("div");
+ host.setAttribute("id", "host");
+ const outerRoot = host.attachShadow({mode: "open", delegatesFocus: true});
+
+ const firstOuterDiv = document.createElement("div");
+
+ const innerHost = document.createElement("div");
+ const innerRoot = innerHost.attachShadow({mode: "open"});
+ const firstInnerDiv = document.createElement("div");
+ const secondInnerDiv = document.createElement("div");
+ innerRoot.appendChild(firstInnerDiv);
+ innerRoot.appendChild(secondInnerDiv);
+
+ const secondOuterDiv = document.createElement("div");
+
+ outerRoot.appendChild(firstOuterDiv);
+ outerRoot.appendChild(innerHost);
+ outerRoot.appendChild(secondOuterDiv);
+ document.body.appendChild(host);
+ return [
+ host,
+ outerRoot,
+ firstOuterDiv,
+ secondOuterDiv,
+ innerHost,
+ innerRoot,
+ firstInnerDiv,
+ secondInnerDiv
+ ]
+ }
+
+ function resetShadowDOMTree() {
+ const host = document.getElementById("host");
+ if (host) {
+ host.remove();
+ }
+ return createShadowDOMTree();
+ }
+
+ function resetTabIndexAndFocus(
+ firstOuterDiv,
+ secondOuterDiv,
+ firstInnerDiv,
+ secondInnerDiv,
+ outerRoot,
+ innerRoot
+ ) {
+ firstOuterDiv.removeAttribute("tabindex");
+ firstOuterDiv.removeAttribute("autofocus");
+
+ secondOuterDiv.removeAttribute("tabindex");
+ secondOuterDiv.removeAttribute("autofocus");
+
+ firstInnerDiv.removeAttribute("tabindex");
+ firstInnerDiv.removeAttribute("autofocus");
+
+ secondInnerDiv.removeAttribute("tabindex");
+ secondInnerDiv.removeAttribute("autofocus");
+
+ resetFocus(document);
+ resetFocus(outerRoot);
+ resetFocus(innerRoot);
+ }
+
+ function setAllTabIndexTo(
+ firstOuterDiv,
+ secondOuterDiv,
+ firstInnerDiv,
+ secondInnerDiv,
+ tabIndex
+ ) {
+ firstOuterDiv.tabIndex = tabIndex;
+ secondOuterDiv.tabIndex = tabIndex;
+ firstInnerDiv.tabIndex = tabIndex;
+ secondInnerDiv.tabIndex = tabIndex;
+ }
+
+ test(function() {
+ const [
+ host,
+ outerRoot,
+ firstOuterDiv,
+ secondOuterDiv,
+ innerHost,
+ innerRoot,
+ firstInnerDiv,
+ secondInnerDiv
+ ] = resetShadowDOMTree();
+
+ resetTabIndexAndFocus(
+ firstOuterDiv,
+ secondOuterDiv,
+ firstInnerDiv,
+ secondInnerDiv,
+ outerRoot,
+ innerRoot
+ );
+
+ setAllTabIndexTo(
+ firstOuterDiv,
+ secondOuterDiv,
+ firstInnerDiv,
+ secondInnerDiv,
+ 0
+ );
+
+ // <div #host> (delegatesFocus = true)
+ // #shadowRoot
+ // <div tabIndex=0 #firstOuterDiv>
+ // <div #innertHost>
+ // #shadowRoot
+ // <div tabIndex=0 #firstInnerDiv>
+ // <div tabIndex=0 #secondInnerDiv>
+ // <div tabIndex=0 autofocus #secondOuterDiv>
+ secondOuterDiv.autofocus = true;
+ secondOuterDiv.setAttribute("autofocus", true);
+
+ host.focus();
+
+ assert_equals(document.activeElement, host);
+ assert_equals(outerRoot.activeElement, secondOuterDiv);
+ }, "The second input should be focused since it has autofocus");
+
+ test(function() {
+ const [
+ host,
+ outerRoot,
+ firstOuterDiv,
+ secondOuterDiv,
+ innerHost,
+ innerRoot,
+ firstInnerDiv,
+ secondInnerDiv
+ ] = resetShadowDOMTree();
+
+ resetTabIndexAndFocus(
+ firstOuterDiv,
+ secondOuterDiv,
+ firstInnerDiv,
+ secondInnerDiv,
+ outerRoot,
+ innerRoot
+ );
+
+ // <div #host> (delegatesFocus = true)
+ // #shadowRoot
+ // <div #firstOuterDiv>
+ // <div #innertHost>
+ // #shadowRoot
+ // <div tabIndex=0 #firstInnerDiv>
+ // <div tabIndex=0 autofocus #secondInnerDiv>
+ // <div #secondOuterDiv>
+ firstInnerDiv.tabIndex = 0;
+ secondInnerDiv.tabIndex = 0;
+ secondInnerDiv.setAttribute("autofocus", true);
+
+ host.focus();
+ assert_equals(document.activeElement, document.body);
+ assert_equals(outerRoot.activeElement, null);
+ }, "Focus should not be delegated to the autofocus element because the inner host doesn't have delegates focus");
+
+ test(function() {
+ const [
+ host,
+ outerRoot,
+ firstOuterDiv,
+ secondOuterDiv,
+ innerHost,
+ innerRoot,
+ firstInnerDiv,
+ secondInnerDiv
+ ] = resetShadowDOMTree();
+
+ resetTabIndexAndFocus(
+ firstOuterDiv,
+ secondOuterDiv,
+ firstInnerDiv,
+ secondInnerDiv,
+ outerRoot,
+ innerRoot
+ );
+
+ const newInnerHost = document.createElement("div");
+ const newInnerRoot = newInnerHost.attachShadow({mode: "open", delegatesFocus: true});
+ const newFirstInnerDiv = document.createElement("div");
+ const newSecondInnerDiv = document.createElement("div");
+ newFirstInnerDiv.setAttribute("tabIndex", 0);
+ newSecondInnerDiv.setAttribute("tabIndex", 0);
+
+ newSecondInnerDiv.setAttribute("autofocus", true);
+ newInnerRoot.appendChild(newFirstInnerDiv);
+ newInnerRoot.appendChild(newSecondInnerDiv);
+
+ // <div #host> (delegatesFocus = true)
+ // #shadowRoot
+ // <div #firstOuterDiv>
+ // <div #innertHost> (delegatesFocus = true)
+ // #shadowRoot
+ // <div tabIndex=0 #newFirstInnerDiv>
+ // <div tabIndex=0 autofocus #newSecondInnerDiv>
+ // <div #secondOuterDiv>
+ outerRoot.replaceChild(newInnerHost, innerHost);
+
+ host.focus();
+
+ assert_equals(document.activeElement, host);
+ assert_equals(outerRoot.activeElement, newInnerHost);
+ assert_equals(newInnerRoot.activeElement, newSecondInnerDiv);
+ }, "Focus should be delegated to the autofocus element when the inner host has delegates focus");
+
+ test(function() {
+ const [
+ host,
+ outerRoot,
+ firstOuterDiv,
+ secondOuterDiv,
+ innerHost,
+ innerRoot,
+ firstInnerDiv,
+ secondInnerDiv
+ ] = resetShadowDOMTree();
+
+ resetTabIndexAndFocus(
+ firstOuterDiv,
+ secondOuterDiv,
+ firstInnerDiv,
+ secondInnerDiv,
+ outerRoot,
+ innerRoot
+ );
+
+ // <div #host> (delegatesFocus = true)
+ // #shadowRoot
+ // <slot>
+ // (slotted) <div autofocus tabIndex=0 #slottedAutofocus></div>
+ // <div tabIndex=0 #firstOuterDiv>
+ // <div #innertHost>
+ // #shadowRoot
+ // <div tabIndex=0 #firstInnerDiv>
+ // <div tabIndex=0 autofocus #secondInnerDiv>
+ // <div #secondOuterDiv>
+
+ const slottedAutofocus = document.createElement("div");
+ slottedAutofocus.tabIndex = 0;
+ slottedAutofocus.setAttribute("autofocus", true);
+ host.appendChild(slottedAutofocus);
+
+ const slot = document.createElement("slot");
+ outerRoot.insertBefore(slot, firstOuterDiv);
+
+ firstOuterDiv.tabIndex = 0;
+
+ host.focus();
+ assert_equals(document.activeElement, host);
+ assert_equals(outerRoot.activeElement, firstOuterDiv);
+ }, "Focus should not be delegated to the slotted elements");
+
+ test(function() {
+ const [
+ host,
+ outerRoot,
+ firstOuterDiv,
+ secondOuterDiv,
+ innerHost,
+ innerRoot,
+ firstInnerDiv,
+ secondInnerDiv
+ ] = resetShadowDOMTree();
+
+ resetTabIndexAndFocus(
+ firstOuterDiv,
+ secondOuterDiv,
+ firstInnerDiv,
+ secondInnerDiv,
+ outerRoot,
+ innerRoot
+ );
+
+ // <div #host> (delegatesFocus = true)
+ // #shadowRoot
+ // <div #firstOuterDiv>
+ // <div tabIndex=0 #firstNestedDiv>
+ // <div tabIndex=0 #secondNestedDiv>
+ // <div tabIndex=0 autofocus #thirdNestedDiv>
+ // <div #innertHost>
+ // #shadowRoot
+ // <div #firstInnerDiv>
+ // <div #secondInnerDiv>
+ // <div autofocus tabIndex=0 #secondOuterDiv>
+
+ secondInnerDiv.tabIndex = 0;
+ secondInnerDiv.setAttribute("autofocus", true);
+
+ const firstNestedDiv = document.createElement("div");
+ const secondNestedDiv = document.createElement("div");
+ const thirdNestedDiv = document.createElement("div");
+
+ firstNestedDiv.tabIndex = 0;
+ secondNestedDiv.tabIndex = 0;
+ thirdNestedDiv.tabIndex = 0;
+ thirdNestedDiv.setAttribute("autofocus", true);
+
+ firstOuterDiv.appendChild(firstNestedDiv);
+ firstNestedDiv.appendChild(secondNestedDiv);
+ secondNestedDiv.appendChild(thirdNestedDiv);
+
+ host.focus();
+
+ assert_equals(document.activeElement, host);
+ assert_equals(outerRoot.activeElement, thirdNestedDiv);
+ }, "Focus should be delegated to the nested div which has autofocus based on the tree order");
+ </script>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-03 07:26:21 +0000