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.
32 lines
720 B
HTML
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>
|