LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-04 05:19:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Use inner available space to calculate auto height of abspos

Browse Source 
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/
This commit is contained in:
Aliaksandr Kalenik 2023-11-14 17:33:45 +01:00 committed by Andreas Kling
parent 6b5a0100d9
commit eac7916d2c
Notes: sideshowbarker 2024-07-17 01:21:02 +09:00 
Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/SerenityOS/serenity/commit/eac7916d2c
Pull-request: https://github.com/SerenityOS/serenity/pull/21936
3 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
Tests/LibWeb/Layout/expected/block-and-inline/abspos-grid-with-definite-width.txt Normal file
View File

@ -0,0 +1,25 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x18 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x0 children: not-inline
Box <div.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<HTML>) [0,0 800x20] overflow: [0,1 799x81.28125]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x2] overflow: [0,10 202x72.28125]
PaintableBox (Box<DIV>.box) [0,10 202x72.28125]
PaintableWithLines (BlockContainer(anonymous)) [1,11 200x70.28125]
TextPaintable (TextNode<#text>)

12
Tests/LibWeb/Layout/input/block-and-inline/abspos-grid-with-definite-width.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html><style>
* {
border: 1px solid black;
}
.box {
width: 200px;
position: absolute;
left: 0;
display: grid;
background-color: magenta;
}
</style><div class="box">Giveaways in Channels and Free Premium Giveaways in Channels and Free Premium</div>

2
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
View File

@ -317,7 +317,7 @@ Optional<CSSPixels> 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