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

LibWeb: Resolve flex item auto cross sizes through aspect ratio

Browse source 
Makes the bird logo show up on https://twitter.com/ :^)
This commit is contained in:
Andreas Kling 2023-07-05 17:30:48 +02:00
parent d6a3a50ec9
commit 4474aa0ae5
4 changed files with 32 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

5
Tests/LibWeb/Layout/expected/flex/flex-column-item-with-natural-aspect-ratio-and-automatic-cross-size.txt Normal file
View file

@ -0,0 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x100 [BFC] children: not-inline
Box <body> at (0,0) content-size 800x100 flex-container(column) [FFC] children: not-inline
SVGSVGBox <svg> at (0,0) content-size 200x100 flex-item [SVG] children: not-inline
SVGGeometryBox <rect> at (0,0) content-size 200x100 children: not-inline

14
Tests/LibWeb/Layout/input/flex/flex-column-item-with-natural-aspect-ratio-and-automatic-cross-size.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html><style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column
}
svg {
align-self: flex-start;
height: 100px;
}
</style><svg viewBox="0 0 10 5"><rect fill="green" x="0" y="0" width="10" height="5"></svg>

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

@ -563,6 +563,13 @@ CSSPixels FlexFormattingContext::calculate_main_size_from_cross_size_and_aspect_
return cross_size / aspect_ratio; return cross_size / aspect_ratio;
} }
CSSPixels FlexFormattingContext::calculate_cross_size_from_main_size_and_aspect_ratio(CSSPixels main_size, double aspect_ratio) const
{
if (is_row_layout())
return main_size / aspect_ratio;
return main_size * aspect_ratio;
}
// This function takes a size in the main axis and adjusts it according to the aspect ratio of the box // This function takes a size in the main axis and adjusts it according to the aspect ratio of the box
// if the min/max constraints in the cross axis forces us to come up with a new main axis size. // if the min/max constraints in the cross axis forces us to come up with a new main axis size.
CSSPixels FlexFormattingContext::adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(Box const& box, CSSPixels main_size, CSS::Size const& min_cross_size, CSS::Size const& max_cross_size) const CSSPixels FlexFormattingContext::adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(Box const& box, CSSPixels main_size, CSS::Size const& min_cross_size, CSS::Size const& max_cross_size) const
@ -1150,6 +1157,11 @@ void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem&
if (should_treat_cross_size_as_auto(item.box)) { if (should_treat_cross_size_as_auto(item.box)) {
// Item has automatic cross size, layout with "fit-content" // Item has automatic cross size, layout with "fit-content"
if (item.box->has_preferred_aspect_ratio() && item.main_size.has_value()) {
item.hypothetical_cross_size = calculate_cross_size_from_main_size_and_aspect_ratio(item.main_size.value(), item.box->preferred_aspect_ratio().value());
return;
}
CSSPixels fit_content_cross_size = 0; CSSPixels fit_content_cross_size = 0;
if (is_row_layout()) { if (is_row_layout()) {
auto available_width = item.main_size.has_value() ? AvailableSize::make_definite(item.main_size.value()) : AvailableSize::make_indefinite(); auto available_width = item.main_size.has_value() ? AvailableSize::make_definite(item.main_size.value()) : AvailableSize::make_indefinite();

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

@ -36,6 +36,7 @@ private:
[[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_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 calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, double aspect_ratio) const; [[nodiscard]] CSSPixels calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, double aspect_ratio) const;
[[nodiscard]] CSSPixels calculate_cross_size_from_main_size_and_aspect_ratio(CSSPixels main_size, double aspect_ratio) const;
void dump_items() const; void dump_items() const;