RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 08:07:44 +00:00
Code Issues Activity Actions

LibWeb: Fix intrinsic sizing when min or max width is specified

Browse source 
Fixes the problem that width is incorrectly computed in intrinsic
sizing mode when there are blocks that have min-width or max-width
specified.

Actually that is just the fix of a symptom of the larger problem that
Length::to_px() returns 0 when value is auto regardless of available
size.
This commit is contained in:
Aliaksandr Kalenik 2023-05-02 17:20:10 +03:00 • committed by Andreas Kling
parent 9bd35fda56
commit f6ff37398c
3 changed files with 26 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

5
Tests/LibWeb/Layout/expected/block-and-inline/intrinsic-sizing-with-min-width-specified.txt Normal file
View file

@ -0,0 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x52 children: not-inline
BlockContainer <body> at (10,10) content-size 104x34 floating children: not-inline
BlockContainer <div.outer> at (11,11) content-size 102x32 children: not-inline
BlockContainer <div.inner> at (12,12) content-size 100x30 children: not-inline

17
Tests/LibWeb/Layout/input/block-and-inline/intrinsic-sizing-with-min-width-specified.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html><style>
* {
font-family: 'SerenitySans';
border: 1px solid black;
}
body {
float: left;
}
.outer {
min-width: 32px;
background-color: orange;
}
.inner {
width: 100px;
height: 30px;
}
</style><div class="outer"><div class="inner">

6
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View file

@ -229,7 +229,8 @@ void BlockFormattingContext::compute_width(Box const& box, AvailableSpace const&
// but this time using the computed value of 'max-width' as the computed value for 'width'. // but this time using the computed value of 'max-width' as the computed value for 'width'.
if (!computed_values.max_width().is_none()) { if (!computed_values.max_width().is_none()) {
auto max_width = calculate_inner_width(box, available_space.width, computed_values.max_width()); auto max_width = calculate_inner_width(box, available_space.width, computed_values.max_width());
if (used_width.to_px(box) > max_width.to_px(box)) { auto used_width_px = used_width.is_auto() ? available_space.width.to_px() : used_width.to_px(box);
if (used_width_px > max_width.to_px(box)) {
used_width = try_compute_width(max_width); used_width = try_compute_width(max_width);
} }
} }
@ -238,7 +239,8 @@ void BlockFormattingContext::compute_width(Box const& box, AvailableSpace const&
// but this time using the value of 'min-width' as the computed value for 'width'. // but this time using the value of 'min-width' as the computed value for 'width'.
if (!computed_values.min_width().is_auto()) { if (!computed_values.min_width().is_auto()) {
auto min_width = calculate_inner_width(box, available_space.width, computed_values.min_width()); auto min_width = calculate_inner_width(box, available_space.width, computed_values.min_width());
if (used_width.to_px(box) < min_width.to_px(box)) { auto used_width_px = used_width.is_auto() ? available_space.width.to_px() : used_width.to_px(box);
if (used_width_px < min_width.to_px(box)) {
used_width = try_compute_width(min_width); used_width = try_compute_width(min_width);
} }
} }