RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 13:07:46 +00:00
Code Issues Activity Actions

LibWeb: Calculate floating elements width using min- and max-width

Browse source 
Previously, floating elements computed the width by only using the
`width` property. Now, they will also use the `min-width` and
`max-width` properties. :^)

The new steps are from "10.4. Minimum and maximum widths: 'min-width'
and 'max-width'" in the CSS 2 spec.

Found it when looking at curl.se.
This commit is contained in:
Karol Kosek 2022-06-05 11:45:46 +02:00 • committed by Linus Groh
parent ea1e5b630d
commit a0bea0b86f
1 changed files with 35 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -278,8 +278,7 @@ void BlockFormattingContext::compute_width_for_floating_box(Box const& box, Layo
if (margin_right.is_auto())
margin_right = zero_value;
auto width = computed_values.width().has_value() ? computed_values.width()->resolved(box, width_of_containing_block_as_length).resolved(box) : CSS::Length::make_auto();
auto compute_width = [&](auto width) {
// If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
if (width.is_auto()) {
@ -296,6 +295,30 @@ void BlockFormattingContext::compute_width_for_floating_box(Box const& box, Layo
width = CSS::Length(min(max(result.preferred_minimum_width, available_width), result.preferred_width), CSS::Length::Type::Px);
}
return width;
};
auto specified_width = computed_values.width().has_value() ? computed_values.width()->resolved(box, width_of_containing_block_as_length).resolved(box) : CSS::Length::make_auto();
// 1. The tentative used width is calculated (without 'min-width' and 'max-width')
auto width = compute_width(specified_width);
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
// but this time using the computed value of 'max-width' as the computed value for 'width'.
auto specified_max_width = computed_values.max_width().has_value() ? computed_values.max_width()->resolved(box, width_of_containing_block_as_length).resolved(box) : CSS::Length::make_auto();
if (!specified_max_width.is_auto()) {
if (width.to_px(box) > specified_max_width.to_px(box))
width = compute_width(specified_max_width);
}
// 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
// but this time using the value of 'min-width' as the computed value for 'width'.
auto specified_min_width = computed_values.min_width().has_value() ? computed_values.min_width()->resolved(box, width_of_containing_block_as_length).resolved(box) : CSS::Length::make_auto();
if (!specified_min_width.is_auto()) {
if (width.to_px(box) < specified_min_width.to_px(box))
width = compute_width(specified_min_width);
}
auto& box_state = m_state.get_mutable(box);
box_state.content_width = width.to_px(box);
box_state.margin_left = margin_left.to_px(box);