浏览代码

LibWeb: Adjust flex item intrinsic contributions through aspect ratio

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.
Andreas Kling 10 月之前
父节点
当前提交
bde2d3dc7b

+ 9 - 0
Tests/LibWeb/Layout/expected/flex/intrinsic-cross-size-contribution-with-main-size-constraint.txt

@@ -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 - 0
Tests/LibWeb/Layout/input/flex/intrinsic-cross-size-contribution-with-main-size-constraint.html

@@ -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 - 0
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

@@ -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 - 0
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h

@@ -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;