RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 12:38:12 +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

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

@ -278,22 +278,45 @@ 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()) {
// If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
if (width.is_auto()) {
// Find the available width: in this case, this is the width of the containing
// block minus the used values of 'margin-left', 'border-left-width', 'padding-left',
// 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
float available_width = width_of_containing_block
- margin_left.to_px(box) - computed_values.border_left().width - padding_left.to_px(box)
- padding_right.to_px(box) - computed_values.border_right().width - margin_right.to_px(box);
// Find the available width: in this case, this is the width of the containing
// block minus the used values of 'margin-left', 'border-left-width', 'padding-left',
// 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
float available_width = width_of_containing_block
- margin_left.to_px(box) - computed_values.border_left().width - padding_left.to_px(box)
- padding_right.to_px(box) - computed_values.border_right().width - margin_right.to_px(box);
auto result = calculate_shrink_to_fit_widths(box);
auto result = calculate_shrink_to_fit_widths(box);
// Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
width = CSS::Length(min(max(result.preferred_minimum_width, available_width), result.preferred_width), CSS::Length::Type::Px);
}
// Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
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);