| <!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> |