system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-21 18:15:58 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Stop changing width of block-level flex containers during layout

Browse source 
If the parent BFC can come up with a nice stretch-fit width for the flex
container, it will have already done so *before* even entering flex
layout. There's no need to do it again, midway through the flex layout
algorithm.

This wasn't just unnecessary, but we were also doing it incorrectly and
not taking margins into account when calculating the amount of available
space for stretch-fit. This led to oversized flex containers in the
presence of negative margins.

Fixes #18614
This commit is contained in:
Andreas Kling 2023-05-08 14:48:03 +02:00
parent 771208d2e2
commit 1ebae7a779
5 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Tests/LibWeb/Layout/expected/block-and-inline/max-width-on-child-block-with-width-auto-contributes-to-intrinsic-size-of-parent.txt
View file

@ -1,6 +1,6 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x39.46875 [BFC] children: not-inline
Box <body.outer> at (10,10) content-size 764x21.46875 flex-container(row) [FFC] children: not-inline
Box <body.outer> at (10,10) content-size 780x21.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <div.middle> at (11,11) content-size 202x19.46875 flex-item [BFC] children: not-inline
BlockContainer <div.inner> at (12,12) content-size 200x17.46875 children: inline
line 0 width: 45.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125

7
Tests/LibWeb/Layout/expected/flex/flex-container-with-max-width-and-negative-margin-in-same-axis.txt Normal file
View file

@ -0,0 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
BlockContainer <div#container-of-flex> at (8,8) content-size 100x100 children: not-inline
Box <div#flex> at (-92,8) content-size 200x100 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (-92,8) content-size 0x0 [BFC] children: inline
TextNode <#text>

2
Tests/LibWeb/Layout/expected/table/in-auto-height-flex-item.txt
View file

@ -1,6 +1,6 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x39.46875 [BFC] children: not-inline
Box <body> at (10,10) content-size 764x21.46875 flex-container(row) [FFC] children: not-inline
Box <body> at (10,10) content-size 780x21.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <div.upper> at (11,11) content-size 41.78125x19.46875 flex-item [BFC] children: not-inline
TableWrapper <(anonymous)> at (11,11) content-size 41.78125x19.46875 [BFC] children: not-inline
TableBox <(anonymous)> at (11,11) content-size 41.78125x19.46875 [TFC] children: not-inline

12
Tests/LibWeb/Layout/input/flex/flex-container-with-max-width-and-negative-margin-in-same-axis.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html><html><head><style>
#container-of-flex {
max-width: 100px;
}
#flex {
display: flex;
margin-left: -100px;
background-color: orange;
height: 100px;
}
</style></head><body><div id="container-of-flex"><div id="flex"> </div>

5
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View file

@ -1056,9 +1056,10 @@ CSSPixels BlockFormattingContext::greatest_child_width(Box const& box) const
return max_width;
}
void BlockFormattingContext::determine_width_of_child(Box const& box, AvailableSpace const& available_space)
void BlockFormattingContext::determine_width_of_child(Box const&, AvailableSpace const&)
{
compute_width(box, available_space);
// NOTE: We don't do anything here, since we'll have already determined the width of the child
// before recursing into nested layout within the child.
}
void BlockFormattingContext::determine_height_of_child(Box const& box, AvailableSpace const& available_space)