dialog-focus-shadow-double-nested.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>dialog focusing delegation: with two nested shadow trees</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>

<dialog>
  <template class="turn-into-shadow-tree delegates-focus">
    <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>
chromium/third_party/blink/web_tests/external/wpt/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-double-nested.html
