RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 04:47:35 +00:00
Code Issues Activity Actions

LibWeb: Implement more values of flexbox align-content

Browse source 
Implement the values 'space-between' and 'space-around'
of the 'align-content' flexbox property.

The following WPT tests now pass:
- http://wpt.live/css/css-flexbox/align-content-004.htm
- http://wpt.live/css/css-flexbox/align-content-005.htm
This commit is contained in:
Max Stevens 2022-12-14 21:30:59 +01:00 • committed by Andreas Kling
parent b7eea03103
commit 3aeb7a41c0
1 changed files with 24 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1451,6 +1451,7 @@ void FlexFormattingContext::align_all_flex_lines()
sum_of_flex_line_cross_sizes += line.cross_size;
float start_of_current_line = 0;
float gap_size = 0;
switch (flex_container().computed_values().align_content()) {
case CSS::AlignContent::FlexStart:
start_of_current_line = 0;
@ -1461,12 +1462,30 @@ void FlexFormattingContext::align_all_flex_lines()
case CSS::AlignContent::Center:
start_of_current_line = (cross_size_of_flex_container / 2) - (sum_of_flex_line_cross_sizes / 2);
break;
case CSS::AlignContent::SpaceBetween:
dbgln("FIXME: align-content: space-between");
case CSS::AlignContent::SpaceBetween: {
start_of_current_line = 0;
float leftover_free_space = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
if (leftover_free_space >= 0) {
int gap_count = m_flex_lines.size() - 1;
gap_size = leftover_free_space / gap_count;
}
break;
case CSS::AlignContent::SpaceAround:
dbgln("FIXME: align-content: space-around");
}
case CSS::AlignContent::SpaceAround: {
float leftover_free_space = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
if (leftover_free_space < 0) {
// If the leftover free-space is negative this value is identical to center.
start_of_current_line = (cross_size_of_flex_container / 2) - (sum_of_flex_line_cross_sizes / 2);
break;
}
gap_size = leftover_free_space / m_flex_lines.size();
// The spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines.
start_of_current_line = gap_size / 2;
break;
}
case CSS::AlignContent::Stretch:
start_of_current_line = 0;
break;
@ -1477,7 +1496,7 @@ void FlexFormattingContext::align_all_flex_lines()
for (auto* flex_item : flex_line.items) {
flex_item->cross_offset += center_of_current_line;
}
start_of_current_line += flex_line.cross_size;
start_of_current_line += flex_line.cross_size + gap_size;
}
}
}