ladybird/Tests/LibWeb/Text/input/css/pseudo-element-hover-invalidation.html
Andreas Kling 162412c81a LibWeb: Narrow pseudo-class self invalidation
Only mark an element itself dirty for interaction pseudo-class changes
when matching rules can plausibly match that element. Check every style
scope observing the element, and keep the normal invalidation plan for
descendants and siblings.

Treat pseudo-elements as neutral during the plausibility check so rules
like a:hover::before still invalidate the originating element. Add text
coverage for non-matching hover rules and pseudo-element hover changes.
2026-05-30 02:13:23 +02:00

32 lines
720 B
HTML

<!DOCTYPE html>
<style>
a {
display: block;
width: 100px;
height: 100px;
}
a::before {
content: "before";
color: red;
}
a:hover::before {
color: green;
}
</style>
<script src="../include.js"></script>
<a href="#">Hover me</a>
<script>
test(() => {
const anchor = document.querySelector("a");
println("initial color: " + getComputedStyle(anchor, "::before").color);
internals.mouseMove(50, 50);
println("hovered color: " + getComputedStyle(anchor, "::before").color);
internals.mouseMove(150, 150);
println("unhovered color: " + getComputedStyle(anchor, "::before").color);
});
</script>