Ladybird/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-06-09 09:34:57 +09:00
Code Activity

LibWeb: Adjust flex item intrinsic contributions through aspect ratio

Browse source 
When determining the intrinsic cross size contribution of a flex item
with a preferred aspect ratio, we have to account for any min/max
constraints in the main axis.
This commit is contained in:
Andreas Kling 2024-08-21 12:41:45 +02:00 • committed by Andreas Kling
parent 81fbb5ebc2
commit bde2d3dc7b
Notes: github-actions[bot] 2024-08-21 11:39:27 +00:00
4 changed files with 41 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Tests/LibWeb/Layout/expected/flex/intrinsic-cross-size-contribution-with-main-size-constraint.txt Normal file
View file

@ -0,0 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x0 [BFC] children: not-inline
Box <body> at (8,8) content-size 50x50 positioned flex-container(row) [FFC] children: not-inline
ImageBox <img> at (8,8) content-size 50x50 flex-item children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x0] overflow: [8,8 50x50]
PaintableBox (Box<BODY>) [8,8 50x50]
ImagePaintable (ImageBox<IMG>) [8,8 50x50]

9
Tests/LibWeb/Layout/input/flex/intrinsic-cross-size-contribution-with-main-size-constraint.html Normal file
View file

@ -0,0 +1,9 @@
<!doctype html><style type="text/css">
* { outline: 1px solid black; }
body {
display: flex;
position: absolute;
left: 0px;
}
img { max-width: 50px; }
</style><body><img src="../120.png">

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

@ -521,6 +521,21 @@ CSSPixels FlexFormattingContext::adjust_main_size_through_aspect_ratio_for_cross
return main_size;
}
CSSPixels FlexFormattingContext::adjust_cross_size_through_aspect_ratio_for_main_size_min_max_constraints(Box const& box, CSSPixels cross_size, CSS::Size const& min_main_size, CSS::Size const& max_main_size) const
{
if (!should_treat_main_max_size_as_none(box)) {
auto max_main_size_px = max_main_size.to_px(box, is_row_layout() ? m_flex_container_state.content_width() : m_flex_container_state.content_height());
cross_size = min(cross_size, calculate_cross_size_from_main_size_and_aspect_ratio(max_main_size_px, box.preferred_aspect_ratio().value()));
}
if (!min_main_size.is_auto()) {
auto min_main_size_px = min_main_size.to_px(box, is_row_layout() ? m_flex_container_state.content_width() : m_flex_container_state.content_height());
cross_size = max(cross_size, calculate_cross_size_from_main_size_and_aspect_ratio(min_main_size_px, box.preferred_aspect_ratio().value()));
}
return cross_size;
}
// https://www.w3.org/TR/css-flexbox-1/#algo-main-item
void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(FlexItem& item)
{
@ -1860,6 +1875,9 @@ CSSPixels FlexFormattingContext::calculate_cross_min_content_contribution(FlexIt
return !is_row_layout() ? get_pixel_width(item.box, computed_cross_size(item.box)) : get_pixel_height(item.box, computed_cross_size(item.box));
}();
if (item.box->has_preferred_aspect_ratio())
size = adjust_cross_size_through_aspect_ratio_for_main_size_min_max_constraints(item.box, size, computed_main_min_size(item.box), computed_main_max_size(item.box));
auto const& computed_min_size = this->computed_cross_min_size(item.box);
auto const& computed_max_size = this->computed_cross_max_size(item.box);
@ -1879,6 +1897,9 @@ CSSPixels FlexFormattingContext::calculate_cross_max_content_contribution(FlexIt
return !is_row_layout() ? get_pixel_width(item.box, computed_cross_size(item.box)) : get_pixel_height(item.box, computed_cross_size(item.box));
}();
if (item.box->has_preferred_aspect_ratio())
size = adjust_cross_size_through_aspect_ratio_for_main_size_min_max_constraints(item.box, size, computed_main_min_size(item.box), computed_main_max_size(item.box));
auto const& computed_min_size = this->computed_cross_min_size(item.box);
auto const& computed_max_size = this->computed_cross_max_size(item.box);

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

@ -34,6 +34,8 @@ private:
[[nodiscard]] bool should_treat_cross_max_size_as_none(Box const&) const;
[[nodiscard]] CSSPixels adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(Box const&, CSSPixels main_size, CSS::Size const& min_cross_size, CSS::Size const& max_cross_size) const;
[[nodiscard]] CSSPixels adjust_cross_size_through_aspect_ratio_for_main_size_min_max_constraints(Box const&, CSSPixels cross_size, CSS::Size const& min_main_size, CSS::Size const& max_main_size) const;
[[nodiscard]] CSSPixels calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, CSSPixelFraction aspect_ratio) const;
[[nodiscard]] CSSPixels calculate_cross_size_from_main_size_and_aspect_ratio(CSSPixels main_size, CSSPixelFraction aspect_ratio) const;