From eac7916d2c6771aefa93c916002d34cce1a72155 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Tue, 14 Nov 2023 17:33:45 +0100 Subject: [PATCH] LibWeb: Use inner available space to calculate auto height of abspos By using available_inner_space_or_constraints_from(available_space), we ensure that the available space used to calculate the min/max content height is constrained by the width specified for the box itself (I know that at least GFC always expects available width to be constrained by specified width if there is any). This change improves layout in "Recent news" block on https://telegram.org/ --- .../abspos-grid-with-definite-width.txt | 25 +++++++++++++++++++ .../abspos-grid-with-definite-width.html | 12 +++++++++ .../LibWeb/Layout/FormattingContext.cpp | 2 +- 3 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/abspos-grid-with-definite-width.txt create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/abspos-grid-with-definite-width.html diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/abspos-grid-with-definite-width.txt b/Tests/LibWeb/Layout/expected/block-and-inline/abspos-grid-with-definite-width.txt new file mode 100644 index 0000000000..c929168bf4 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/abspos-grid-with-definite-width.txt @@ -0,0 +1,25 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x18 [BFC] children: not-inline + BlockContainer at (10,10) content-size 780x0 children: not-inline + Box at (1,11) content-size 200x70.28125 positioned [GFC] children: not-inline + BlockContainer <(anonymous)> at (1,11) content-size 200x70.28125 [BFC] children: inline + line 0 width: 181.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 21, rect: [1,11 181.78125x17.46875] + "Giveaways in Channels" + line 1 width: 149.4375, height: 17.9375, bottom: 35.40625, baseline: 13.53125 + frag 0 from TextNode start: 22, length: 16, rect: [1,28 149.4375x17.46875] + "and Free Premium" + line 2 width: 181.78125, height: 18.40625, bottom: 53.34375, baseline: 13.53125 + frag 0 from TextNode start: 39, length: 21, rect: [1,45 181.78125x17.46875] + "Giveaways in Channels" + line 3 width: 149.4375, height: 17.875, bottom: 70.28125, baseline: 13.53125 + frag 0 from TextNode start: 61, length: 16, rect: [1,63 149.4375x17.46875] + "and Free Premium" + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x20] overflow: [0,1 799x81.28125] + PaintableWithLines (BlockContainer) [9,9 782x2] overflow: [0,10 202x72.28125] + PaintableBox (Box
.box) [0,10 202x72.28125] + PaintableWithLines (BlockContainer(anonymous)) [1,11 200x70.28125] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/block-and-inline/abspos-grid-with-definite-width.html b/Tests/LibWeb/Layout/input/block-and-inline/abspos-grid-with-definite-width.html new file mode 100644 index 0000000000..58bd1101e4 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/abspos-grid-with-definite-width.html @@ -0,0 +1,12 @@ +
Giveaways in Channels and Free Premium Giveaways in Channels and Free Premium
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp index 68ab410939..cebfe0740d 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp @@ -317,7 +317,7 @@ Optional FormattingContext::compute_auto_height_for_absolutely_positi // NOTE: For anything else, we use the fit-content height. // This should eventually be replaced by the new absolute positioning model: // https://www.w3.org/TR/css-position-3/#abspos-layout - return calculate_fit_content_height(box, available_space); + return calculate_fit_content_height(box, m_state.get(box).available_inner_space_or_constraints_from(available_space)); } // https://www.w3.org/TR/CSS22/visudet.html#root-height