зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1739665 [wpt PR 31523] - Test <dialog> + shadow DOM focus, a=testonly
Automatic update from web-platform-tests Test <dialog> + shadow DOM focus Follows https://github.com/whatwg/html/pull/7285. -- wpt-commits: 628af0fd55db95d785a63484882998343e3a069e wpt-pr: 31523
This commit is contained in:
Domenic Denicola
moz-wptsync-bot
Родитель
724063bf57
Коммит
157c4ab8f0
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>dialog focusing delegation with autofocus plus delegatesFocus inside the dialog</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<body>
|
||||
|
||||
<dialog>
|
||||
<template class="turn-into-shadow-tree">
|
||||
<button disabled>Non-focusable</button>
|
||||
<template class="turn-into-shadow-tree delegates-focus">
|
||||
<button tabindex="-1">Focusable</button>
|
||||
<button tabindex="-1" autofocus>Focusable</button>
|
||||
<button tabindex="-1">Focusable</button>
|
||||
</template>
|
||||
<button tabindex="-1">Focusable</button>
|
||||
</template>
|
||||
<button tabindex="-1">Focusable</button>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
function turnIntoShadowTree(template) {
|
||||
for (const subTemplate of template.content.querySelectorAll(".turn-into-shadow-tree")) {
|
||||
turnIntoShadowTree(subTemplate);
|
||||
}
|
||||
|
||||
const div = document.createElement("div");
|
||||
div.attachShadow({ mode: "open", delegatesFocus: template.classList.contains("delegates-focus") });
|
||||
div.shadowRoot.append(template.content);
|
||||
template.replaceWith(div);
|
||||
}
|
||||
|
||||
for (const template of document.querySelectorAll(".turn-into-shadow-tree")) {
|
||||
turnIntoShadowTree(template);
|
||||
}
|
||||
|
||||
for (const method of ["show", "showModal"]) {
|
||||
test(t => {
|
||||
const dialog = document.querySelector("dialog");
|
||||
dialog[method]();
|
||||
t.add_cleanup(() => dialog.close());
|
||||
|
||||
const shadowHostOuter = dialog.querySelector("div");
|
||||
assert_equals(document.activeElement, shadowHostOuter, "document.activeElement");
|
||||
|
||||
const shadowHostInner = shadowHostOuter.shadowRoot.querySelector("div");
|
||||
assert_equals(shadowHostOuter.shadowRoot.activeElement, shadowHostInner, "shadowHostOuter.shadowRoot.activeElement");
|
||||
|
||||
const button = shadowHostInner.shadowRoot.querySelector("[autofocus]");
|
||||
assert_equals(shadowHostInner.shadowRoot.activeElement, button, "shadowHostInner.shadowRoot.activeElement");
|
||||
}, `${method}()`);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<body>
|
||||
|
||||
<dialog data-description="When autofocus is not present, the first focusable shadow-including descendant must be focused">
|
||||
<template class="turn-into-shadow-tree">
|
||||
<button disabled>Non-focusable</button>
|
||||
<button tabindex="-1" class="focus-me">Focusable</button>
|
||||
<button disabled>Non-focusable</button>
|
||||
</template>
|
||||
</dialog>
|
||||
|
||||
<dialog data-description="autofocus outside a shadow tree must take precedence over earlier in-shadow-tree focusable elements">
|
||||
<button disabled>Non-focusable</button>
|
||||
<template class="turn-into-shadow-tree">
|
||||
<button tabindex="-1">Focusable</button>
|
||||
</template>
|
||||
<button tabindex="-1" autofocus>Focusable</button>
|
||||
</dialog>
|
||||
|
||||
<dialog data-description="autofocus inside a shadow tree must be ignored: no focusable elements outside the shadow tree">
|
||||
<template class="turn-into-shadow-tree">
|
||||
<button tabindex="-1" class="focus-me">Focusable</button>
|
||||
<button tabindex="-1" autofocus>Focusable</button>
|
||||
<button tabindex="-1">Focusable</button>
|
||||
</template>
|
||||
</dialog>
|
||||
|
||||
<dialog data-description="autofocus inside a shadow tree must be ignored: focusable element before the shadow tree">
|
||||
<button tabindex="-1" class="focus-me">Focusable</button>
|
||||
<template class="turn-into-shadow-tree">
|
||||
<button tabindex="-1">Focusable</button>
|
||||
<button tabindex="-1" autofocus>Focusable</button>
|
||||
<button tabindex="-1">Focusable</button>
|
||||
</template>
|
||||
</dialog>
|
||||
|
||||
<dialog data-description="autofocus inside a shadow tree must be ignored: focusable element after the shadow tree">
|
||||
<template class="turn-into-shadow-tree">
|
||||
<button tabindex="-1">Focusable</button>
|
||||
<button tabindex="-1" autofocus>Focusable</button>
|
||||
<button tabindex="-1">Focusable</button>
|
||||
</template>
|
||||
<button tabindex="-1" class="focus-me">Focusable</button>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
for (const template of document.querySelectorAll(".turn-into-shadow-tree")) {
|
||||
const div = document.createElement("div");
|
||||
div.attachShadow({ mode: "open" });
|
||||
div.shadowRoot.append(template.content);
|
||||
template.replaceWith(div);
|
||||
}
|
||||
|
||||
for (const dialog of document.querySelectorAll("dialog")) {
|
||||
for (const method of ["show", "showModal"]) {
|
||||
test(t => {
|
||||
dialog[method]();
|
||||
t.add_cleanup(() => dialog.close());
|
||||
|
||||
const expectedFocusOutsideShadowTree = dialog.querySelector(".focus-me");
|
||||
if (expectedFocusOutsideShadowTree) {
|
||||
assert_equals(document.activeElement, expectedFocusOutsideShadowTree);
|
||||
} else {
|
||||
const shadowHost = dialog.querySelector("div");
|
||||
const expectedFocusInsideShadowTree = shadowHost.shadowRoot.querySelector(".focus-me");
|
||||
assert_not_equals(expectedFocusInsideShadowTree, "Precondition check: the test was set up to expect a focused element, either outside the shadow tree or inside");
|
||||
|
||||
assert_equals(document.activeElement, shadowHost);
|
||||
assert_equals(shadowHost.shadowRoot.activeElement, expectedFocusInsideShadowTree);
|
||||
}
|
||||
}, `${method}: ${dialog.dataset.description}`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Загрузка…
Ссылка в новой задаче