LibWeb: Recompute relative units in Element::recompute_inherited_style()

Properties with relative units has to be recomputed in inherited style
update as they depend on the parent's style.

Fixes https://github.com/LadybirdBrowser/ladybird/issues/3364
This commit is contained in:
Aliaksandr Kalenik 2025-01-26 21:49:17 +01:00 committed by Andreas Kling
commit cfe9b7a82b
Notes: github-actions[bot] 2025-01-26 22:11:49 +00:00
3 changed files with 58 additions and 2 deletions

View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<head>
<script src="include.js"></script>
<style>
.parent {
font-size: 32px;
}
.child {
font-size: 3em;
width: 2em;
height: 2em;
color: blue;
background-color: magenta;
}
</style>
</head>
<body>
<div class="parent" id="parentElement">
<p class="child">
Hello!
</p>
</div>
<script>
function increaseParentSize() {
document.getElementById('parentElement').style.fontSize = '100px';
}
test(() => {
const childStyleBefore = window.getComputedStyle(document.querySelector('.child'));
println("(before) child.style.width: " + childStyleBefore.width);
println("(before) child.style.height: " + childStyleBefore.height);
println("(before) child.style.fontSize: " + childStyleBefore.fontSize);
increaseParentSize();
const childStyleAfter = window.getComputedStyle(document.querySelector('.child'));
println("(after) child.style.width: " + childStyleAfter.width);
println("(after) child.style.height: " + childStyleAfter.height);
println("(after) child.style.fontSize: " + childStyleAfter.fontSize);
});
</script>
</body>
</html>