system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-21 18:15:58 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Fix sizing of flex child that has flex-basis 0

Browse source 
Before if an element didn't have a main min size we would clamp
it to a literal zero. If that element also had a flex-basis 0
it's width would end up being 0.
This patch adds a determine_min_main_size_of_child function that
will calculate the minimum main size for the box based on the
content of the box.
We use the result of that function now instead of clamping
the element main min size to 0.

This also adds one more box to the flex.html test page, which is
the same flex: 0 0 0 box but with flex-direction: column.
This commit is contained in:
Enver Balalic 2022-03-30 19:50:57 +02:00 committed by Andreas Kling
parent 74d8e201eb
commit 8b4d09932a
3 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Base/res/html/misc/flex.html
View file

@ -186,6 +186,12 @@
<div class="box" style="flex: 0 0 0;">2</div>
<div class="box" style="flex: 0 0 0;">3</div>
</div>
<p>flex: 0 0 0; flex-direction: column;</p>
<div class="my-container column" style="width: 500px;">
<div class="box" style="flex: 0 0 0;">1</div>
<div class="box" style="flex: 0 0 0;">2</div>
<div class="box" style="flex: 0 0 0;">3</div>
</div>
<p>flex: 1 2 0;</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 1 2 0;">1</div>

7
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -565,11 +565,16 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
}();
// The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).
auto clamp_min = has_main_min_size(child_box) ? specified_main_min_size(child_box) : 0;
auto clamp_min = has_main_min_size(child_box) ? specified_main_min_size(child_box) : determine_min_main_size_of_child(child_box);
auto clamp_max = has_main_max_size(child_box) ? specified_main_max_size(child_box) : NumericLimits<float>::max();
flex_item.hypothetical_main_size = clamp(flex_item.flex_base_size, clamp_min, clamp_max);
}
float FlexFormattingContext::determine_min_main_size_of_child(Box const& box)
{
return is_row_layout() ? calculate_min_and_max_content_width(box).min_content_size : calculate_min_and_max_content_height(box).min_content_size;
}
// https://www.w3.org/TR/css-flexbox-1/#algo-main-container
void FlexFormattingContext::determine_main_size_of_flex_container(bool const main_is_constrained, float const main_min_size, float const main_max_size)
{

1
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
View file

@ -79,6 +79,7 @@ private:
bool has_main_max_size(Box const&) const;
bool has_cross_max_size(Box const&) const;
float sum_of_margin_padding_border_in_main_axis(Box const&) const;
float determine_min_main_size_of_child(Box const& box);
void set_main_size(Box const&, float size);
void set_cross_size(Box const&, float size);