Anne van Kesteren
5bd235d9df
Automatic update from web-platform-tests CSS: :active/:focus-within/:hover in the top layer -- wpt-commits: 8e6d5935cea6defe50c257017bfaa3c87147dd37 wpt-pr: 58648
99 lines
3.6 KiB
HTML
99 lines
3.6 KiB
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>
|