mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 01:35:08 +02:00
d75934edf5
When an absolutely positioned non-BFC element (flex, grid, etc.) has auto height, we pre-compute its height from content before running inside layout. Previously, this content-derived height was marked as "definite", which incorrectly allowed descendants to resolve percentage heights against it. Per CSS 2.1 section 10.5, percentage heights should only resolve when the containing block's height is specified explicitly. The fix is to simply not set has_definite_height when the CSS height is auto. This naturally prevents percentage resolution through all existing paths (set_node, should_treat_height_as_auto, calculate_inner_height) without needing any new flags or per-site checks. Two additional fixes enable this: - In flex line cross-size clamping, remove the contains_percentage() guard that prevented percentage min/max-height from resolving. These percentages resolve correctly via calculate_inner_height's containing block lookup, since the abspos element's containing block always has a definite height. - In grid item alignment, check should_treat_height/width_as_auto for percentage preferred sizes, so they're treated as auto when the grid container's height is indefinite (CSS Grid section 6.6).
50 lines
982 B
HTML
50 lines
982 B
HTML
<!DOCTYPE html>
|
|
<script src="include.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
#containing-block {
|
|
position: relative;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
#container {
|
|
display: flex;
|
|
position: absolute;
|
|
top: calc(10% + 10px);
|
|
bottom: calc(20% + 10px);
|
|
left: 0;
|
|
width: 160px;
|
|
}
|
|
|
|
#item {
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
|
|
#content {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
</style>
|
|
<div id="containing-block">
|
|
<div id="container">
|
|
<div id="item">
|
|
<div id="content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
const containerRect = document.getElementById("container").getBoundingClientRect();
|
|
const itemRect = document.getElementById("item").getBoundingClientRect();
|
|
|
|
println(`container height: ${containerRect.height}`);
|
|
println(`item height: ${itemRect.height}`);
|
|
println(`item height is 50% of resolved inset height: ${itemRect.height === containerRect.height / 2}`);
|
|
});
|
|
</script>
|