From 8d9920af16352a3d1427a3d7e159d1a40bd55439 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Tue, 8 Jul 2025 20:10:51 +0200 Subject: [PATCH] LibWeb: Account for natural aspect ratio in calculate_min_content_height By the time we calculate the min-content height, the width is already known, so we can use it to calculate the height based on the natural aspect ratio. --- Libraries/LibWeb/Layout/FormattingContext.cpp | 5 ++++- .../grid/img-with-percentage-width-and-height.txt | 9 +++++++++ .../grid/img-with-percentage-width-and-height.html | 12 ++++++++++++ .../css-flexbox/flex-aspect-ratio-img-column-011.txt | 8 ++++---- 4 files changed, 29 insertions(+), 5 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/grid/img-with-percentage-width-and-height.txt create mode 100644 Tests/LibWeb/Layout/input/grid/img-with-percentage-width-and-height.html diff --git a/Libraries/LibWeb/Layout/FormattingContext.cpp b/Libraries/LibWeb/Layout/FormattingContext.cpp index 8791523330b..c26511f7c34 100644 --- a/Libraries/LibWeb/Layout/FormattingContext.cpp +++ b/Libraries/LibWeb/Layout/FormattingContext.cpp @@ -1513,8 +1513,11 @@ CSSPixels FormattingContext::calculate_min_content_height(Layout::Box const& box if (box.is_block_container() || box.display().is_table_inside()) return calculate_max_content_height(box, width); - if (box.has_natural_height()) + if (box.has_natural_height()) { + if (box.has_natural_aspect_ratio()) + return width / *box.natural_aspect_ratio(); return *box.natural_height(); + } auto& cache = box.cached_intrinsic_sizes().min_content_height.ensure(width); if (cache.has_value()) diff --git a/Tests/LibWeb/Layout/expected/grid/img-with-percentage-width-and-height.txt b/Tests/LibWeb/Layout/expected/grid/img-with-percentage-width-and-height.txt new file mode 100644 index 00000000000..347f4db9c9d --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/img-with-percentage-width-and-height.txt @@ -0,0 +1,9 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x66 [BFC] children: not-inline + Box at (8,8) content-size 50x50 [GFC] children: not-inline + ImageBox at (8,8) content-size 50x50 children: not-inline + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x66] + PaintableBox (Box) [8,8 50x50] + ImagePaintable (ImageBox) [8,8 50x50] diff --git a/Tests/LibWeb/Layout/input/grid/img-with-percentage-width-and-height.html b/Tests/LibWeb/Layout/input/grid/img-with-percentage-width-and-height.html new file mode 100644 index 00000000000..6a8bd26dca3 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/img-with-percentage-width-and-height.html @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-011.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-011.txt index adc45b2df54..a3cf3efdbb9 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-011.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-011.txt @@ -2,15 +2,15 @@ Harness status: OK Found 10 tests -7 Pass -3 Fail +9 Pass +1 Fail Pass .flexbox 1 Pass .flexbox 2 Pass .flexbox 3 Pass .flexbox 4 Fail .flexbox 5 Pass .flexbox 6 -Fail .flexbox 7 +Pass .flexbox 7 Pass .flexbox 8 Pass .flexbox 9 -Fail .flexbox 10 \ No newline at end of file +Pass .flexbox 10 \ No newline at end of file