mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 05:25:32 +03:00
LibWeb: Stop changing width of block-level flex containers during layout
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:
parent
771208d2e2
commit
1ebae7a779
Notes:
sideshowbarker
2024-07-17 18:46:30 +09:00
Author: https://github.com/awesomekling Commit: https://github.com/SerenityOS/serenity/commit/1ebae7a779 Pull-request: https://github.com/SerenityOS/serenity/pull/18724 Issue: https://github.com/SerenityOS/serenity/issues/18614
@ -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
|
||||
|
@ -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>
|
@ -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
|
||||
|
@ -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>
|
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user