Blitz - WPT: hover-toplayer-001.html

wpt / css / selectors / hover-toplayer-001.html

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

Subtest	Status	Message
Hovering inside a modal dialog should not propagate :hover beyond the dialog.	FAIL	promise_test: Unhandled rejection with value: object "TypeError: not a callable function"
Hovering inside a popover should not propagate :hover beyond the popover.	FAIL	promise_test: Unhandled rejection with value: object "TypeError: not a callable function"
With nested top layer elements, :hover should stop at the innermost top layer boundary.	FAIL	promise_test: Unhandled rejection with value: object "TypeError: not a callable function"

Enable JavaScript in test iframe

/css/selectors/hover-toplayer-001.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Selectors: :hover should not propagate past top layer elements</title>
<link rel="help" href="https://drafts.csswg.org/selectors/#the-hover-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>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
  dialog::backdrop {
    background: transparent;
  }
</style>

<div id="outer">
  <dialog id="dialog">
    <div id="inner">hover target</div>
  </dialog>
</div>

<div id="popoverOuter">
  <div id="popover" popover>
    <div id="popoverInner">hover target</div>
  </div>
</div>

<div id="nestOuter">
  <dialog id="nestDialog">
    <div id="nestPopover" popover>
      <div id="nestInner">hover target</div>
    </div>
  </dialog>
</div>

<script>
promise_test(async t => {
  const dialog = document.getElementById('dialog');
  dialog.showModal();
  t.add_cleanup(() => dialog.close());

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

  await new test_driver.Actions()
    .pointerMove(1, 1, {origin: inner})
    .send();
  await new Promise(requestAnimationFrame);

  assert_true(inner.matches(':hover'), 'inner element should match :hover');
  assert_true(dialog.matches(':hover'), 'dialog (top layer) should match :hover');
  assert_false(outer.matches(':hover'), 'ancestor outside top layer should not match :hover');
  assert_false(document.body.matches(':hover'), 'body should not match :hover');
}, 'Hovering inside a modal dialog should not propagate :hover beyond the dialog.');

promise_test(async t => {
  const popover = document.getElementById('popover');
  popover.showPopover();
  t.add_cleanup(() => popover.hidePopover());

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

  await new test_driver.Actions()
    .pointerMove(1, 1, {origin: popoverInner})
    .send();
  await new Promise(requestAnimationFrame);

  assert_true(popoverInner.matches(':hover'), 'inner element should match :hover');
  assert_true(popover.matches(':hover'), 'popover (top layer) should match :hover');
  assert_false(popoverOuter.matches(':hover'), 'ancestor outside top layer should not match :hover');
  assert_false(document.body.matches(':hover'), 'body should not match :hover');
}, 'Hovering inside a popover should not propagate :hover beyond the popover.');

promise_test(async 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 nestInner = document.getElementById('nestInner');
  const nestOuter = document.getElementById('nestOuter');

  await new test_driver.Actions()
    .pointerMove(1, 1, {origin: nestInner})
    .send();
  await new Promise(requestAnimationFrame);

  assert_true(nestInner.matches(':hover'), 'inner element should match :hover');
  assert_true(nestPopover.matches(':hover'), 'popover (innermost top layer) should match :hover');
  assert_false(nestDialog.matches(':hover'), 'dialog (outer top layer) should not match :hover');
  assert_false(nestOuter.matches(':hover'), 'ancestor outside both top layers should not match :hover');
}, 'With nested top layer elements, :hover should stop at the innermost top layer boundary.');
</script>