focus-within-toplayer-001.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 3 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/selectors/focus-within-toplayer-001.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>Selectors: :focus-within should not propagate past top layer elements</title>

<link rel="help" href="https://drafts.csswg.org/selectors/#the-focus-within-pseudo">

<link rel="help" href="https://drafts.csswg.org/css-position-4/#top-layer">

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

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

<style>

  dialog::backdrop {

    background: transparent;

</style>

<div id="outer">

  <dialog id="dialog">

    <input id="dialogInput">

  </dialog>

</div>

<div id="popoverOuter">

  <div id="popover" popover>

    <input id="popoverInput">

  </div>

</div>

<div id="nestOuter">

  <dialog id="nestDialog">

    <div id="nestPopover" popover>

      <input id="nestInput">

    </div>

  </dialog>

</div>

<script>

test(t => {

  const dialog = document.getElementById('dialog');

  dialog.showModal();

  t.add_cleanup(() => dialog.close());

  const dialogInput = document.getElementById('dialogInput');

  const outer = document.getElementById('outer');

  dialogInput.focus();

  assert_true(dialogInput.matches(':focus'), 'input should be focused');

  assert_true(dialog.matches(':focus-within'), 'dialog (top layer) should match :focus-within');

  assert_false(outer.matches(':focus-within'), 'ancestor outside top layer should not match :focus-within');

  assert_false(document.body.matches(':focus-within'), 'body should not match :focus-within');

}, 'Focusing inside a modal dialog should not propagate :focus-within beyond the dialog.');

test(t => {

  const popover = document.getElementById('popover');

  popover.showPopover();

  t.add_cleanup(() => popover.hidePopover());

  const popoverInput = document.getElementById('popoverInput');

  const popoverOuter = document.getElementById('popoverOuter');

  popoverInput.focus();

  assert_true(popoverInput.matches(':focus'), 'input should be focused');

  assert_true(popover.matches(':focus-within'), 'popover (top layer) should match :focus-within');

  assert_false(popoverOuter.matches(':focus-within'), 'ancestor outside top layer should not match :focus-within');

  assert_false(document.body.matches(':focus-within'), 'body should not match :focus-within');

}, 'Focusing inside a popover should not propagate :focus-within beyond the popover.');

test(t => {

  const nestDialog = document.getElementById('nestDialog');

  nestDialog.showModal();

  t.add_cleanup(() => nestDialog.close());

  const nestPopover = document.getElementById('nestPopover');

  nestPopover.showPopover();

  t.add_cleanup(() => nestPopover.hidePopover());

  const nestInput = document.getElementById('nestInput');

  const nestOuter = document.getElementById('nestOuter');

  nestInput.focus();

  assert_true(nestInput.matches(':focus'), 'input should be focused');

  assert_true(nestPopover.matches(':focus-within'), 'popover (innermost top layer) should match :focus-within');

  assert_false(nestDialog.matches(':focus-within'), 'dialog (outer top layer) should not match :focus-within');

  assert_false(nestOuter.matches(':focus-within'), 'ancestor outside both top layers should not match :focus-within');

}, 'With nested top layer elements, :focus-within should stop at the innermost top layer boundary.');

</script>