mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 02:05:07 +02:00
171dfa4db8
The CSS spec (CSS2 10.6.4 / CSS Position 5.3) says: 1. Compute tentative height without min/max-height 2. If result > max-height, re-solve with max-height as height 3. If result < min-height, re-solve with min-height as height We already implemented this correctly for the width axis, but the height axis tried to bake min/max constraints into the solve_for lambda. This corrupted the constraint equation when solving for height with auto height + min-height, since the height term couldn't cancel itself out (it was inflated to min-height on subtraction but stayed 0 on addition). This caused abspos elements with top+bottom insets and min-height to incorrectly get the min-height as their height, even when the containing block was tall enough for a larger height.
43 lines
1.2 KiB
HTML
43 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
* { margin: 0; padding: 0; }
|
|
|
|
.container {
|
|
width: 200px;
|
|
height: 200px;
|
|
position: relative;
|
|
}
|
|
|
|
.abspos {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
background: magenta;
|
|
}
|
|
</style>
|
|
|
|
<!-- Case 1: Height from top+bottom insets with min-height that doesn't constrain -->
|
|
<div class="container">
|
|
<div class="abspos" style="top: 37px; bottom: 0; min-height: 100px;"></div>
|
|
</div>
|
|
|
|
<!-- Case 2: Height from top+bottom insets with min-height that constrains -->
|
|
<div class="container">
|
|
<div class="abspos" style="top: 150px; bottom: 0; min-height: 100px;"></div>
|
|
</div>
|
|
|
|
<!-- Case 3: Height from top+bottom insets with max-height that constrains -->
|
|
<div class="container">
|
|
<div class="abspos" style="top: 0; bottom: 0; max-height: 100px;"></div>
|
|
</div>
|
|
|
|
<!-- Case 4: Height from top+bottom insets with max-height that doesn't constrain -->
|
|
<div class="container">
|
|
<div class="abspos" style="top: 50px; bottom: 50px; max-height: 200px;"></div>
|
|
</div>
|
|
|
|
<!-- Case 5: Height from top+bottom insets with both min-height and max-height -->
|
|
<div class="container">
|
|
<div class="abspos" style="top: 10px; bottom: 10px; min-height: 50px; max-height: 150px;"></div>
|
|
</div>
|