dialog-focus-shadow-double-nested.html (1938B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>dialog focusing delegation: with two nested shadow trees</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <body> 7 8 <dialog> 9 <template class="turn-into-shadow-tree delegates-focus"> 10 <button disabled>Non-focusable</button> 11 <template class="turn-into-shadow-tree delegates-focus"> 12 <button tabindex="-1">Focusable</button> 13 <button tabindex="-1" autofocus>Focusable</button> 14 <button tabindex="-1">Focusable</button> 15 </template> 16 <button tabindex="-1">Focusable</button> 17 </template> 18 <button tabindex="-1">Focusable</button> 19 </dialog> 20 21 <script> 22 function turnIntoShadowTree(template) { 23 for (const subTemplate of template.content.querySelectorAll(".turn-into-shadow-tree")) { 24 turnIntoShadowTree(subTemplate); 25 } 26 27 const div = document.createElement("div"); 28 div.attachShadow({ mode: "open", delegatesFocus: template.classList.contains("delegates-focus") }); 29 div.shadowRoot.append(template.content); 30 template.replaceWith(div); 31 } 32 33 for (const template of document.querySelectorAll(".turn-into-shadow-tree")) { 34 turnIntoShadowTree(template); 35 } 36 37 for (const method of ["show", "showModal"]) { 38 test(t => { 39 const dialog = document.querySelector("dialog"); 40 dialog[method](); 41 t.add_cleanup(() => dialog.close()); 42 43 const shadowHostOuter = dialog.querySelector("div"); 44 assert_equals(document.activeElement, shadowHostOuter, "document.activeElement"); 45 46 const shadowHostInner = shadowHostOuter.shadowRoot.querySelector("div"); 47 assert_equals(shadowHostOuter.shadowRoot.activeElement, shadowHostInner, "shadowHostOuter.shadowRoot.activeElement"); 48 49 const button = shadowHostInner.shadowRoot.querySelector("[autofocus]"); 50 assert_equals(shadowHostInner.shadowRoot.activeElement, button, "shadowHostInner.shadowRoot.activeElement"); 51 }, `${method}()`); 52 } 53 </script>