ladybird/Tests/LibWeb/Text/input/ShadowDOM/css-hover-shadow-dom.html
Andreas Kling 84ab8bf797 LibWeb: Make CSS :hover selector match shadow-inclusive ancestors
Before this change, :hover wouldn't match anything outside the shadow
boundary when hovering elements inside a shadow tree. This was most
noticeable when hovering the text inside an input element and hover
styles disappearing from the hosting input element itself.
2024-08-25 12:53:08 +02:00

23 lines
573 B
HTML

<style>
#myShadowHost:hover {
background: green;
}
#myShadowHost {
position: absolute;
width: 100px;
height: 100px;
}
</style>
<body><div id="myShadowHost"><template shadowrootmode="open"><div>hover me</div></template></div></body>
<script src="../include.js"></script>
<script>
test(() => {
if (window.internals && window.internals.movePointerTo)
internals.movePointerTo(50, 50);
let s = getComputedStyle(myShadowHost);
println("hovered bg: " + s.backgroundColor);
myShadowHost.remove();
});
</script>