fergalmoran/ladybird
1
0
Fork 0
mirror of https://github.com/fergalmoran/ladybird.git synced 2026-01-06 08:36:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Add support for flex-wrap: wrap-reverse

Browse Source 
Reverse the order of flex lines, when the `flex-wrap` property is set to
`wrap-reverse`. This will also swap the cross-start and cross-end
directions.
This commit is contained in:
BenJilks
2024-09-02 14:57:46 +01:00
committed by Andreas Kling
parent e2c1fe7255
commit 46649fbe1b
3 changed files with 190 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View File

@@ -764,8 +764,6 @@ CSSPixels FlexFormattingContext::content_based_minimum_size(FlexItem const& item
// https://www.w3.org/TR/css-flexbox-1/#algo-line-break
void FlexFormattingContext::collect_flex_items_into_flex_lines()
{
// FIXME: Also support wrap-reverse
// If the flex container is single-line, collect all the flex items into a single flex line.
if (is_single_line()) {
FlexLine line;
@@ -810,6 +808,9 @@ void FlexFormattingContext::collect_flex_items_into_flex_lines()
line_main_size += main_gap();
}
m_flex_lines.append(move(line));
if (flex_container().computed_values().flex_wrap() == CSS::FlexWrap::WrapReverse)
m_flex_lines.reverse();
}
// https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
@@ -1446,13 +1447,21 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
for (auto& item : flex_line.items) {
CSSPixels half_line_size = flex_line.cross_size / 2;
switch (alignment_for_item(item.box)) {
case CSS::AlignItems::Normal:
// https://drafts.csswg.org/css-flexbox/#flex-wrap-property
// When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.
if (flex_container().computed_values().flex_wrap() == CSS::FlexWrap::WrapReverse) {
item.cross_offset = half_line_size - item.cross_size.value() - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after;
} else {
item.cross_offset = -half_line_size + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before;
}
break;
case CSS::AlignItems::Baseline:
// FIXME: Implement this
// Fallthrough
case CSS::AlignItems::Start:
case CSS::AlignItems::FlexStart:
case CSS::AlignItems::Stretch:
case CSS::AlignItems::Normal:
item.cross_offset = -half_line_size + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before;
break;
case CSS::AlignItems::End: