beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 15:40:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Honor gap between flex lines when using align-content: stretch

Browse source 
We have to take the cross gap into account when calculating the "sum of
flex line cross sizes" in "Handle 'align-content: stretch'".
This commit is contained in:
Andreas Kling 2023-04-16 19:31:55 +02:00
parent f488df0e10
commit b9b6037d2b
Notes: sideshowbarker 2024-07-19 01:59:31 +09:00 
Author: https://github.com/awesomekling
Commit: https://github.com/SerenityOS/serenity/commit/b9b6037d2b
Pull-request: https://github.com/SerenityOS/serenity/pull/18400
3 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
Tests/LibWeb/Layout/expected/flex/stretch-alignment-with-cross-gap.txt Normal file
View file

@ -0,0 +1,10 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x220 children: not-inline
BlockContainer <body> at (10,10) content-size 780x202 children: not-inline
Box <div.flex> at (11,11) content-size 300x200 flex-container(row) children: not-inline
BlockContainer <div> at (12,12) content-size 100x20 flex-item children: not-inline
BlockContainer <div> at (114,12) content-size 100x20 flex-item children: not-inline
BlockContainer <div> at (12,95.333328) content-size 100x20 flex-item children: not-inline
BlockContainer <div> at (114,95.333328) content-size 100x20 flex-item children: not-inline
BlockContainer <div> at (12,178.666656) content-size 100x20 flex-item children: not-inline
BlockContainer <div> at (114,178.666656) content-size 100x20 flex-item children: not-inline

17
Tests/LibWeb/Layout/input/flex/stretch-alignment-with-cross-gap.html Normal file
View file

@ -0,0 +1,17 @@
<!doctype html><style>
* {
border: 1px solid black;
}
.flex {
display: flex;
align-content: stretch;
width: 300px;
height: 200px;
flex-wrap: wrap;
row-gap: 50px;
}
.flex > div {
width: 100px;
height: 20px;
}
</style><div class="flex"><div></div><div></div><div></div><div></div><div></div><div></div>

3
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -2022,6 +2022,9 @@ void FlexFormattingContext::handle_align_content_stretch()
for (auto& line : m_flex_lines)
sum_of_flex_line_cross_sizes += line.cross_size;
// CSS-FLEXBOX-2: Account for gap between flex lines.
sum_of_flex_line_cross_sizes += cross_gap() * (m_flex_lines.size() - 1);
if (sum_of_flex_line_cross_sizes >= inner_cross_size(flex_container()))
return;