mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-22 23:50:19 +00:00
7daf5cdaff
Pseudo-elements' style is only computed while building the layout tree. This meant that previously, they would not have their style recomputed in some cases. (Such as when :hover is applied to an ancestor.) Now, when recomputing an element's style, we also return a full invalidation if one or more pseudo-elements would exist either before or after style recomputation. This heuristic produces some false positives, but no false negatives. Because pseudo-elements' style is computed during layout building, any computation done here is then thrown away. So this approach minimises the amount of wasted style computation. Plus it's simple, until we have data on what approach would be faster. This fixes the Acid2 nose becoming blue when the .nose div is hovered.
33 lines
811 B
HTML
33 lines
811 B
HTML
<!doctype html>
|
|
<style>
|
|
.outer {
|
|
height: 100px;
|
|
}
|
|
.inner {
|
|
display: inline-block;
|
|
}
|
|
.inner::before {
|
|
content: "Hi";
|
|
background-color: red;
|
|
}
|
|
.outer:hover .inner::before {
|
|
content: "Long text";
|
|
background-color: lime;
|
|
}
|
|
</style>
|
|
<script src="../include.js"></script>
|
|
<div class="outer"><div class="inner"></div></div>
|
|
<script>
|
|
test(() => {
|
|
const inner = document.querySelector('.inner');
|
|
println('Not hovering: ' + inner.clientWidth);
|
|
|
|
// Move mouse over .outer
|
|
internals.movePointerTo(80, 80);
|
|
println('Hovering: ' + inner.clientWidth);
|
|
|
|
// Move mouse away again
|
|
internals.movePointerTo(200, 200);
|
|
println('Not hovering: ' + inner.clientWidth);
|
|
});
|
|
</script>
|