popover-shadowhost-focus.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/popovers/popover-shadowhost-focus.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<link rel=author href="mailto:jarhar@chromium.org">

<link rel=help href="https://github.com/whatwg/html/issues/8994">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<div popover=auto tabindex=0 data-test="autofocus=true, delegatesfocus=false" autofocus class=should-be-focused>

  <template shadowrootmode=open>

    <button autofocus>autofocus button</button>

  </template>

</div>

<!-- The autofocus popover is what focus() gets called on, but since it has a

  delegatesFocus shadowroot, focus() itself goes into the shadowroot. -->

<div popover=auto tabindex=0 data-test="autofocus=true, delegatesfocus=true" autofocus>

  <template shadowrootmode=open shadowrootdelegatesfocus>

    <button autofocus class=should-be-focused>autofocus button</button>

  </template>

</div>

<div popover=auto tabindex=0 data-test="autofocus=false, delegatesfocus=false">

  <template shadowrootmode=open>

    <button autofocus>autofocus button</button>

  </template>

</div>

<div popover=auto tabindex=0 data-test="autofocus=false, delegatesfocus=true">

  <template shadowrootmode=open shadowrootdelegatesfocus>

    <button autofocus>autofocus button</button>

  </template>

</div>

<script>

document.querySelectorAll('body > [popover]').forEach(popover => {

  promise_test(async () => {

    const expectedFocusedElement = (popover.matches('.should-be-focused') ? popover : null)

      || popover.querySelector('.should-be-focused')

      || popover.shadowRoot.querySelector('.should-be-focused')

      || document.body;

    popover.showPopover();

    let actualFocusedElement = document.activeElement;

    if (actualFocusedElement.shadowRoot && actualFocusedElement.shadowRoot.activeElement) {

      actualFocusedElement = actualFocusedElement.shadowRoot.activeElement;

    popover.hidePopover();

    // Resetting focus may happen asynchronously

    await new Promise(resolve => requestAnimationFrame(resolve));

    assert_equals(actualFocusedElement, expectedFocusedElement);

  }, popover.getAttribute('data-test'));

});

</script>