beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-26 09:30:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

LibWeb: Fix multi-line flex column layouts with auto height on container

Browse source 
When sizing a flex container with flex-direction:column under a
max-content height constraint, we were incorrectly truncating the
infinite available height to 0 when collecting flex items into lines.

This caused us to put every flex item in its own flex line, which is the
complete opposite of what we want during max-content intrinsic sizing,
as the layout would grow wide but not tall.
This commit is contained in:
Andreas Kling 2023-04-16 19:48:40 +02:00
parent b9b6037d2b
commit e7f5b5a2f3
Notes: sideshowbarker 2024-07-17 04:09:56 +09:00 
Author: https://github.com/awesomekling
Commit: https://github.com/SerenityOS/serenity/commit/e7f5b5a2f3
Pull-request: https://github.com/SerenityOS/serenity/pull/18403
3 changed files with 23 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
Tests/LibWeb/Layout/expected/flex/multi-line-column-container-with-automatic-height.txt Normal file
View file

@ -0,0 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x176 children: not-inline
BlockContainer <body> at (10,10) content-size 780x158 children: not-inline
Box <div.flexbox> at (11,11) content-size 200x156 flex-container(column) children: not-inline
BlockContainer <div> at (12,12) content-size 50x50 flex-item children: not-inline
BlockContainer <div> at (12,64) content-size 50x50 flex-item children: not-inline
BlockContainer <div> at (12,116) content-size 50x50 flex-item children: not-inline

15
Tests/LibWeb/Layout/input/flex/multi-line-column-container-with-automatic-height.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html><style>
* {
border: 1px solid black;
}
.flexbox {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 200px;
}
.flexbox > div {
width: 50px;
height: 50px;
}
</style><div class="flexbox"><div></div><div></div><div></div>

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

@ -845,7 +845,7 @@ void FlexFormattingContext::collect_flex_items_into_flex_lines()
CSSPixels line_main_size = 0; CSSPixels line_main_size = 0;
for (auto& item : m_flex_items) { for (auto& item : m_flex_items) {
auto const outer_hypothetical_main_size = item.outer_hypothetical_main_size(); auto const outer_hypothetical_main_size = item.outer_hypothetical_main_size();
if (!line.items.is_empty() && (line_main_size + outer_hypothetical_main_size) > m_available_space_for_items->main.to_px_or_zero()) { if (!line.items.is_empty() && (line_main_size + outer_hypothetical_main_size) > m_available_space_for_items->main.to_px()) {
m_flex_lines.append(move(line)); m_flex_lines.append(move(line));
line = {}; line = {};
line_main_size = 0; line_main_size = 0;