diff --git a/Source/Core/Layout/FlexFormattingContext.cpp b/Source/Core/Layout/FlexFormattingContext.cpp index 04d00e5d6..4cfddb3e7 100644 --- a/Source/Core/Layout/FlexFormattingContext.cpp +++ b/Source/Core/Layout/FlexFormattingContext.cpp @@ -236,6 +236,8 @@ void FlexFormattingContext::Format(Vector2f& flex_resulting_content_size, Vector const ComputedValues& computed_flex = element_flex->GetComputedValues(); const Style::FlexDirection direction = computed_flex.flex_direction(); + const Style::LengthPercentage row_gap = computed_flex.row_gap(); + const Style::LengthPercentage column_gap = computed_flex.column_gap(); const bool main_axis_horizontal = (direction == Style::FlexDirection::Row || direction == Style::FlexDirection::RowReverse); const bool direction_reverse = (direction == Style::FlexDirection::RowReverse || direction == Style::FlexDirection::ColumnReverse); @@ -257,6 +259,9 @@ void FlexFormattingContext::Format(Vector2f& flex_resulting_content_size, Vector const float main_size_base_value = (main_available_size < 0.0f ? 0.0f : main_available_size); const float cross_size_base_value = (cross_available_size < 0.0f ? 0.0f : cross_available_size); + const float main_gap_size = ResolveValue(main_axis_horizontal ? column_gap : row_gap, main_size_base_value); + const float cross_gap_size = ResolveValue(main_axis_horizontal ? row_gap : column_gap, cross_size_base_value); + // -- Build a list of all flex items with base size information -- const int num_flex_children = element_flex->GetNumChildren(); Vector items; @@ -386,6 +391,8 @@ void FlexFormattingContext::Format(Vector2f& flex_resulting_content_size, Vector // Add item to current line. line_items.push_back(std::move(item)); } + + cursor += main_gap_size; } if (!line_items.empty()) @@ -397,6 +404,18 @@ void FlexFormattingContext::Format(Vector2f& flex_resulting_content_size, Vector for (FlexLine& line : container.lines) { + // now that items are in lines, we can add the main gap size to all but the last item + if (main_gap_size > 0.f) + { + for (size_t i = 0; i < line.items.size() - 1; i++) + { + line.items[i].hypothetical_main_size += main_gap_size; + line.items[i].flex_base_size += main_gap_size; + line.items[i].main.margin_b += main_gap_size; + line.items[i].main.sum_edges += main_gap_size; + } + } + line.accumulated_hypothetical_main_size = std::accumulate(line.items.begin(), line.items.end(), 0.0f, [](float value, const FlexItem& item) { return value + item.hypothetical_main_size; }); } @@ -624,6 +643,20 @@ void FlexFormattingContext::Format(Vector2f& flex_resulting_content_size, Vector } } + // Apply cross axis gaps to every item in every line except the last line. + if (cross_gap_size > 0.f) + { + for (size_t i = 0; i < container.lines.size() - 1; i++) + { + FlexLine& line = container.lines[i]; + for (FlexItem& item : line.items) + { + item.cross.margin_b += cross_gap_size; + item.cross.sum_edges += cross_gap_size; + } + } + } + // -- Determine cross size (ยง9.4) -- // First, determine the cross size of each item, format it if necessary. for (FlexLine& line : container.lines) diff --git a/Tests/Data/VisualTests/gap-001.rml b/Tests/Data/VisualTests/gap-001.rml new file mode 100644 index 000000000..e05ee17e9 --- /dev/null +++ b/Tests/Data/VisualTests/gap-001.rml @@ -0,0 +1,35 @@ + + + + CSS Flexbox Test: gap - horizontal + + + + + + + + + + +

Test passes if there is a green vertical line between boxes.

+
+
+
+
+
+ + diff --git a/Tests/Data/VisualTests/gap-002.rml b/Tests/Data/VisualTests/gap-002.rml new file mode 100644 index 000000000..990b03ac2 --- /dev/null +++ b/Tests/Data/VisualTests/gap-002.rml @@ -0,0 +1,35 @@ + + + + CSS Flexbox Test: gap - vertical + + + + + + + + +

Test passes if there is a green horizontal line between boxes.

+
+
+
+
+
+
+ + diff --git a/Tests/Data/VisualTests/gap-003.rml b/Tests/Data/VisualTests/gap-003.rml new file mode 100644 index 000000000..f3e5aade4 --- /dev/null +++ b/Tests/Data/VisualTests/gap-003.rml @@ -0,0 +1,37 @@ + + + + CSS Flexbox Test: gap - rows and columns + + + + + + + + + + +

Test passes if there are green lines between boxes.

+
+
+
+
+
+
+ + diff --git a/Tests/Data/VisualTests/gap-004.rml b/Tests/Data/VisualTests/gap-004.rml new file mode 100644 index 000000000..c6fdc6449 --- /dev/null +++ b/Tests/Data/VisualTests/gap-004.rml @@ -0,0 +1,35 @@ + + + + CSS Flexbox Test: gap - intrinsic horizontal + + + + + + + + + + +

Test passes if there are green lines between boxes.

+
+
Black Panther
+
Wonder Woman
+
Storm
+
Flash
+
+ + diff --git a/Tests/Data/VisualTests/gap-005.rml b/Tests/Data/VisualTests/gap-005.rml new file mode 100644 index 000000000..8d61448e0 --- /dev/null +++ b/Tests/Data/VisualTests/gap-005.rml @@ -0,0 +1,35 @@ + + + + CSS Flexbox Test: gap - intrinsic vertical + + + + + + + + + + +

Test passes if there are green lines between boxes.

+
+
Black Panther
+
Wonder Woman
+
Storm
+
Flash
+
+ + diff --git a/Tests/Data/VisualTests/gap-006.rml b/Tests/Data/VisualTests/gap-006.rml new file mode 100644 index 000000000..1183afeaa --- /dev/null +++ b/Tests/Data/VisualTests/gap-006.rml @@ -0,0 +1,50 @@ + + + + CSS Flexbox Test: gap - wrap horizontal + + + + + + + + + + +

Test passes if there are green lines between boxes.

+
+
Black Panther
+
Wonder Woman
+
Storm
+
Flash
+
+ + diff --git a/Tests/Data/VisualTests/gap-007.rml b/Tests/Data/VisualTests/gap-007.rml new file mode 100644 index 000000000..9e08e9177 --- /dev/null +++ b/Tests/Data/VisualTests/gap-007.rml @@ -0,0 +1,38 @@ + + + + CSS Flexbox Test: gap - wrap vertical + + + + + + + + + + +

Test passes if there are green lines between boxes.

+
+
Black Panther
+
Wonder Woman
+
Storm
+
Flash
+
+ + diff --git a/Tests/Data/VisualTests/gap-008.rml b/Tests/Data/VisualTests/gap-008.rml new file mode 100644 index 000000000..12de80d1a --- /dev/null +++ b/Tests/Data/VisualTests/gap-008.rml @@ -0,0 +1,40 @@ + + + + CSS Flexbox Test: gap - row and column gap + + + + + + + + + + +

+ Test passes if there are 40px horizontal green lines and 20px vertical green lines between + boxes. +

+
+
+
+
+
+
+ + diff --git a/Tests/Data/VisualTests/gap-009.rml b/Tests/Data/VisualTests/gap-009.rml new file mode 100644 index 000000000..0d1a19362 --- /dev/null +++ b/Tests/Data/VisualTests/gap-009.rml @@ -0,0 +1,39 @@ + + + + CSS Flexbox Test: gap - mixed units + + + + + + + + + + +

+ Test passes if there are 50% horizontal green line and 1rem vertical green line between boxes. +

+
+
+
+
+
+
+ + diff --git a/Tests/Data/VisualTests/reference/gap-001-ref.rml b/Tests/Data/VisualTests/reference/gap-001-ref.rml new file mode 100644 index 000000000..bc67f5025 --- /dev/null +++ b/Tests/Data/VisualTests/reference/gap-001-ref.rml @@ -0,0 +1,34 @@ + + + + CSS Flexbox Test: gap - horizontal + + + + + +

Test passes if there is a green vertical line between boxes.

+
+
+
+
+
+ + diff --git a/Tests/Data/VisualTests/reference/gap-002-ref.rml b/Tests/Data/VisualTests/reference/gap-002-ref.rml new file mode 100644 index 000000000..64deecb97 --- /dev/null +++ b/Tests/Data/VisualTests/reference/gap-002-ref.rml @@ -0,0 +1,36 @@ + + + + CSS Flexbox Test: gap - vertical + + + + + +

Test passes if there is a green horizontal line between boxes.

+
+
+
+
+
+
+ + diff --git a/Tests/Data/VisualTests/reference/gap-003-ref.rml b/Tests/Data/VisualTests/reference/gap-003-ref.rml new file mode 100644 index 000000000..3526ee4ee --- /dev/null +++ b/Tests/Data/VisualTests/reference/gap-003-ref.rml @@ -0,0 +1,42 @@ + + + + CSS Flexbox Test: gap - rows and columns + + + + + +

Test passes if there are green lines between boxes.

+
+
+
+
+
+
+ + diff --git a/Tests/Data/VisualTests/reference/gap-004-ref.rml b/Tests/Data/VisualTests/reference/gap-004-ref.rml new file mode 100644 index 000000000..bdd11bd5a --- /dev/null +++ b/Tests/Data/VisualTests/reference/gap-004-ref.rml @@ -0,0 +1,34 @@ + + + + CSS Flexbox Test: gap - intrinsic horizontal + + + + + +

Test passes if there are green lines between boxes.

+
+
Black Panther
+
Wonder Woman
+
Storm
+
Flash
+
+ + diff --git a/Tests/Data/VisualTests/reference/gap-005-ref.rml b/Tests/Data/VisualTests/reference/gap-005-ref.rml new file mode 100644 index 000000000..34a0a80cd --- /dev/null +++ b/Tests/Data/VisualTests/reference/gap-005-ref.rml @@ -0,0 +1,34 @@ + + + + CSS Flexbox Test: gap - intrinsic vertical + + + + + +

Test passes if there are green lines between boxes.

+
+
Black Panther
+
Wonder Woman
+
Storm
+
Flash
+
+ + diff --git a/Tests/Data/VisualTests/reference/gap-006-ref.rml b/Tests/Data/VisualTests/reference/gap-006-ref.rml new file mode 100644 index 000000000..8b9e99094 --- /dev/null +++ b/Tests/Data/VisualTests/reference/gap-006-ref.rml @@ -0,0 +1,50 @@ + + + + CSS Flexbox Test: gap - wrap horizontal + + + + + +

Test passes if there are green lines between boxes.

+
+
Black Panther
+
Wonder Woman
+
Storm
+
Flash
+
+ + diff --git a/Tests/Data/VisualTests/reference/gap-007-ref.rml b/Tests/Data/VisualTests/reference/gap-007-ref.rml new file mode 100644 index 000000000..607f431f3 --- /dev/null +++ b/Tests/Data/VisualTests/reference/gap-007-ref.rml @@ -0,0 +1,42 @@ + + + + CSS Flexbox Test: gap - wrap vertical + + + + + +

Test passes if there are green lines between boxes.

+
+
Black Panther
+
Wonder Woman
+
Storm
+
Flash
+
+ + diff --git a/Tests/Data/VisualTests/reference/gap-008-ref.rml b/Tests/Data/VisualTests/reference/gap-008-ref.rml new file mode 100644 index 000000000..ca1633143 --- /dev/null +++ b/Tests/Data/VisualTests/reference/gap-008-ref.rml @@ -0,0 +1,44 @@ + + + + CSS Flexbox Test: gap - row and column gap + + + + + +

+ Test passes if there are 40px horizontal green lines and 20px vertical green lines between boxes. +

+
+
+
+
+
+
+ + diff --git a/Tests/Data/VisualTests/reference/gap-009-ref.rml b/Tests/Data/VisualTests/reference/gap-009-ref.rml new file mode 100644 index 000000000..c9bd5ffad --- /dev/null +++ b/Tests/Data/VisualTests/reference/gap-009-ref.rml @@ -0,0 +1,47 @@ + + + + CSS Flexbox Test: gap - mixed units + + + + + +

+ Test passes if there are 50% horizontal green line and 1rem vertical green line between boxes. +

+
+
+
+
+
+
+ +