popover-focus-inside-slot.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/popovers/popover-focus-inside-slot.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset="utf-8" />

<title>Popover focus behaviors inside shadow DOM</title>

<meta name="timeout" content="long" />

<link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com">

<link rel=help href="https://open-ui.org/components/popover.research.explainer">

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

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

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

<script src="/resources/testdriver-actions.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<script src="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>

<script src="/shadow-dom/focus-navigation/resources/shadow-dom.js"></script>

<script src="resources/popover-utils.js"></script>

<div>

  <template shadowrootmode="open">

    <slot name=invoker></slot>

    <slot name=popover></slot>

    <slot name=after></slot>

  </template>

  <button slot=invoker popovertarget="popover" id="invoker">Open

       popover</button>

  <div slot=popover popover id="popover">

    <input type="checkbox" id="target1" />

    <input type="checkbox" id="target2" />

    <button id="close">Close popover</button>

  </div>

  <button slot=after id="after">

    This button is where focus should land after traversing this popover

  </button>

</div>

<script>

promise_test(async () => {

  // Open popover

  invoker.focus();

  invoker.click();

  assert_true(popover.matches(":popover-open"));

  assert_equals(document.activeElement, invoker);

  await assert_focus_navigation_bidirectional([

    'invoker',

    'target1',

    'target2',

    'close',

    'after',

]);

}, 'Focus behavior of popover elements inside slot');

</script>