<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>

dialog::backdrop {

background: transparent;

}

<div id="outer">

<dialog id="dialog">

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

</dialog>

<div id="popoverOuter">

<div id="popover" popover>

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

</div>

<div id="nestOuter">

<dialog id="nestDialog">

<div id="nestPopover" popover>

<div id="nestInner">hover target</div>

</div>

</dialog>

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.');