diff --git a/src/compute/flexbox.rs b/src/compute/flexbox.rs index cd9d6a785..6d9c88e29 100644 --- a/src/compute/flexbox.rs +++ b/src/compute/flexbox.rs @@ -494,15 +494,23 @@ fn compute_preliminary(tree: &mut impl LayoutFlexboxContainer, node: NodeId, inp // 8.5. Flex Container Baselines: calculate the flex container's first baseline // See https://www.w3.org/TR/css-flexbox-1/#flex-baselines - // For wrap-reverse containers the cross-start-most line is the last line rather than the first, - // and it is that line which the container's first baseline is generated from. + // The baselines are generated from the startmost flex line, where "startmost" refers to the + // line's visual position: for wrap-reverse containers the cross axis is flipped, so the + // startmost line is the last line in flex-line order rather than the first. let first_line = if constants.is_wrap_reverse { flex_lines.last() } else { flex_lines.first() }; let first_vertical_baseline = first_line.and_then(|line| { - line.items - .iter() - .find(|item| constants.is_column || item.participates_in_baseline_alignment(constants.dir)) - .or_else(|| line.items.iter().next()) - .map(|child| child.baseline) + if constants.is_column { + // For column containers the baseline is generated from the startmost item in the line, + // which for reverse-direction containers is the last item in flex order. + let item = if constants.dir.is_reverse() { line.items.last() } else { line.items.first() }; + item.map(|child| child.baseline) + } else { + line.items + .iter() + .find(|item| item.participates_in_baseline_alignment(constants.dir)) + .or_else(|| line.items.iter().next()) + .map(|child| child.baseline) + } }); LayoutOutput::from_sizes_and_baselines( diff --git a/test_fixtures/flex/flex_container_baseline_column_reverse.html b/test_fixtures/flex/flex_container_baseline_column_reverse.html new file mode 100644 index 000000000..02648b69b --- /dev/null +++ b/test_fixtures/flex/flex_container_baseline_column_reverse.html @@ -0,0 +1,22 @@ + + + + + + + The first baseline of a column-reverse flex container is generated from the startmost + (visually topmost) item, which is the last item in flex order. + + + + +
+
+
+
+
+
+
+ + + diff --git a/test_fixtures/flex/flex_container_baseline_column_reverse_wrap_reverse.html b/test_fixtures/flex/flex_container_baseline_column_reverse_wrap_reverse.html new file mode 100644 index 000000000..d375fc398 --- /dev/null +++ b/test_fixtures/flex/flex_container_baseline_column_reverse_wrap_reverse.html @@ -0,0 +1,25 @@ + + + + + + + The first baseline of a multi-line column-reverse wrap-reverse flex container is generated + from the startmost item (last in flex order) of the startmost (visually leftmost) flex line, + which is the last line in flex-line order. + + + + +
+
+
+
+
+
+
+
+
+ + + diff --git a/test_fixtures/flex/flex_container_baseline_wrap_reverse_multiline.html b/test_fixtures/flex/flex_container_baseline_wrap_reverse_multiline.html new file mode 100644 index 000000000..528c41806 --- /dev/null +++ b/test_fixtures/flex/flex_container_baseline_wrap_reverse_multiline.html @@ -0,0 +1,24 @@ + + + + + + + The first baseline of a multi-line wrap-reverse flex container is generated from the first + flex line (in flex-line order), even though wrap-reverse places that line at the cross end. + + + + +
+
+
+
+
+
+
+
+
+ + + diff --git a/test_fixtures/flex/flex_container_baseline_wrap_reverse_multiline_column.html b/test_fixtures/flex/flex_container_baseline_wrap_reverse_multiline_column.html new file mode 100644 index 000000000..1f58f0253 --- /dev/null +++ b/test_fixtures/flex/flex_container_baseline_wrap_reverse_multiline_column.html @@ -0,0 +1,23 @@ + + + + + + + The first baseline of a multi-line wrap-reverse column flex container is generated from the + first flex line (in flex-line order), even though wrap-reverse places that line at the cross end. + + + + +
+
+
+
+
+
+
+
+ + + diff --git a/test_fixtures/flex/flex_container_baseline_wrap_reverse_multiline_text.html b/test_fixtures/flex/flex_container_baseline_wrap_reverse_multiline_text.html new file mode 100644 index 000000000..225427e21 --- /dev/null +++ b/test_fixtures/flex/flex_container_baseline_wrap_reverse_multiline_text.html @@ -0,0 +1,24 @@ + + + + + + + The first baseline of a multi-line wrap-reverse flex container with baseline-aligned items + containing text is generated from the first flex line (in flex-line order). + + + + +
+
+
+
HH
+
+
+
+
+
+ + + diff --git a/tests/xml/flex/flex_container_baseline_column_reverse__border_box_ltr.xml b/tests/xml/flex/flex_container_baseline_column_reverse__border_box_ltr.xml new file mode 100644 index 000000000..478f2678b --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_column_reverse__border_box_ltr.xml @@ -0,0 +1,21 @@ + + + +
+
+
+
+
+
+
+ + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_column_reverse__border_box_rtl.xml b/tests/xml/flex/flex_container_baseline_column_reverse__border_box_rtl.xml new file mode 100644 index 000000000..a6fa31d3f --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_column_reverse__border_box_rtl.xml @@ -0,0 +1,21 @@ + + + +
+
+
+
+
+
+
+ + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_column_reverse__content_box_ltr.xml b/tests/xml/flex/flex_container_baseline_column_reverse__content_box_ltr.xml new file mode 100644 index 000000000..7b15b0e9e --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_column_reverse__content_box_ltr.xml @@ -0,0 +1,21 @@ + + + +
+
+
+
+
+
+
+ + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_column_reverse__content_box_rtl.xml b/tests/xml/flex/flex_container_baseline_column_reverse__content_box_rtl.xml new file mode 100644 index 000000000..6a9192070 --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_column_reverse__content_box_rtl.xml @@ -0,0 +1,21 @@ + + + +
+
+
+
+
+
+
+ + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__border_box_ltr.xml b/tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__border_box_ltr.xml new file mode 100644 index 000000000..de5a796a2 --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__border_box_ltr.xml @@ -0,0 +1,25 @@ + + + +
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__border_box_rtl.xml b/tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__border_box_rtl.xml new file mode 100644 index 000000000..2600591f3 --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__border_box_rtl.xml @@ -0,0 +1,25 @@ + + + +
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__content_box_ltr.xml b/tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__content_box_ltr.xml new file mode 100644 index 000000000..8b9b2f2fe --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__content_box_ltr.xml @@ -0,0 +1,25 @@ + + + +
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__content_box_rtl.xml b/tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__content_box_rtl.xml new file mode 100644 index 000000000..e2c0a28dd --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__content_box_rtl.xml @@ -0,0 +1,25 @@ + + + +
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__border_box_ltr.xml b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__border_box_ltr.xml new file mode 100644 index 000000000..0b491a48b --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__border_box_ltr.xml @@ -0,0 +1,25 @@ + + + +
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__border_box_rtl.xml b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__border_box_rtl.xml new file mode 100644 index 000000000..db28869c2 --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__border_box_rtl.xml @@ -0,0 +1,25 @@ + + + +
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__content_box_ltr.xml b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__content_box_ltr.xml new file mode 100644 index 000000000..90d2c4489 --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__content_box_ltr.xml @@ -0,0 +1,25 @@ + + + +
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__content_box_rtl.xml b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__content_box_rtl.xml new file mode 100644 index 000000000..c244e1349 --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__content_box_rtl.xml @@ -0,0 +1,25 @@ + + + +
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_column__border_box_ltr.xml b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_column__border_box_ltr.xml new file mode 100644 index 000000000..78d66ee5c --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_column__border_box_ltr.xml @@ -0,0 +1,23 @@ + + + +
+
+
+
+
+
+
+
+ + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_column__border_box_rtl.xml b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_column__border_box_rtl.xml new file mode 100644 index 000000000..6ed0af452 --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_column__border_box_rtl.xml @@ -0,0 +1,23 @@ + + + +
+
+
+
+
+
+
+
+ + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_column__content_box_ltr.xml b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_column__content_box_ltr.xml new file mode 100644 index 000000000..c772b6aee --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_column__content_box_ltr.xml @@ -0,0 +1,23 @@ + + + +
+
+
+
+
+
+
+
+ + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_column__content_box_rtl.xml b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_column__content_box_rtl.xml new file mode 100644 index 000000000..c4060246d --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_column__content_box_rtl.xml @@ -0,0 +1,23 @@ + + + +
+
+
+
+
+
+
+
+ + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_text__border_box_ltr.xml b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_text__border_box_ltr.xml new file mode 100644 index 000000000..bfdcccaef --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_text__border_box_ltr.xml @@ -0,0 +1,27 @@ + + + +
+
+
+ + HH + +
+
+
+
+
+ + + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_text__border_box_rtl.xml b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_text__border_box_rtl.xml new file mode 100644 index 000000000..ecda8a275 --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_text__border_box_rtl.xml @@ -0,0 +1,27 @@ + + + +
+
+
+ + HH + +
+
+
+
+
+ + + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_text__content_box_ltr.xml b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_text__content_box_ltr.xml new file mode 100644 index 000000000..d4b92ecd5 --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_text__content_box_ltr.xml @@ -0,0 +1,27 @@ + + + +
+
+
+ + HH + +
+
+
+
+
+ + + + + + + + + + + + + diff --git a/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_text__content_box_rtl.xml b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_text__content_box_rtl.xml new file mode 100644 index 000000000..cdb2170db --- /dev/null +++ b/tests/xml/flex/flex_container_baseline_wrap_reverse_multiline_text__content_box_rtl.xml @@ -0,0 +1,27 @@ + + + +
+
+
+ + HH + +
+
+
+
+
+ + + + + + + + + + + + + diff --git a/tests/xml/mod.rs b/tests/xml/mod.rs index 486e44517..afbd1535f 100644 --- a/tests/xml/mod.rs +++ b/tests/xml/mod.rs @@ -11921,6 +11921,106 @@ mod flex { crate::run_xml_test("flex", "flex_column_relative_all_sides__content_box_rtl"); } + #[test] + fn flex_container_baseline_column_reverse__border_box_ltr() { + crate::run_xml_test("flex", "flex_container_baseline_column_reverse__border_box_ltr"); + } + + #[test] + fn flex_container_baseline_column_reverse__content_box_ltr() { + crate::run_xml_test("flex", "flex_container_baseline_column_reverse__content_box_ltr"); + } + + #[test] + fn flex_container_baseline_column_reverse__border_box_rtl() { + crate::run_xml_test("flex", "flex_container_baseline_column_reverse__border_box_rtl"); + } + + #[test] + fn flex_container_baseline_column_reverse__content_box_rtl() { + crate::run_xml_test("flex", "flex_container_baseline_column_reverse__content_box_rtl"); + } + + #[test] + fn flex_container_baseline_column_reverse_wrap_reverse__border_box_ltr() { + crate::run_xml_test("flex", "flex_container_baseline_column_reverse_wrap_reverse__border_box_ltr"); + } + + #[test] + fn flex_container_baseline_column_reverse_wrap_reverse__content_box_ltr() { + crate::run_xml_test("flex", "flex_container_baseline_column_reverse_wrap_reverse__content_box_ltr"); + } + + #[test] + fn flex_container_baseline_column_reverse_wrap_reverse__border_box_rtl() { + crate::run_xml_test("flex", "flex_container_baseline_column_reverse_wrap_reverse__border_box_rtl"); + } + + #[test] + fn flex_container_baseline_column_reverse_wrap_reverse__content_box_rtl() { + crate::run_xml_test("flex", "flex_container_baseline_column_reverse_wrap_reverse__content_box_rtl"); + } + + #[test] + fn flex_container_baseline_wrap_reverse_multiline__border_box_ltr() { + crate::run_xml_test("flex", "flex_container_baseline_wrap_reverse_multiline__border_box_ltr"); + } + + #[test] + fn flex_container_baseline_wrap_reverse_multiline__content_box_ltr() { + crate::run_xml_test("flex", "flex_container_baseline_wrap_reverse_multiline__content_box_ltr"); + } + + #[test] + fn flex_container_baseline_wrap_reverse_multiline__border_box_rtl() { + crate::run_xml_test("flex", "flex_container_baseline_wrap_reverse_multiline__border_box_rtl"); + } + + #[test] + fn flex_container_baseline_wrap_reverse_multiline__content_box_rtl() { + crate::run_xml_test("flex", "flex_container_baseline_wrap_reverse_multiline__content_box_rtl"); + } + + #[test] + fn flex_container_baseline_wrap_reverse_multiline_column__border_box_ltr() { + crate::run_xml_test("flex", "flex_container_baseline_wrap_reverse_multiline_column__border_box_ltr"); + } + + #[test] + fn flex_container_baseline_wrap_reverse_multiline_column__content_box_ltr() { + crate::run_xml_test("flex", "flex_container_baseline_wrap_reverse_multiline_column__content_box_ltr"); + } + + #[test] + fn flex_container_baseline_wrap_reverse_multiline_column__border_box_rtl() { + crate::run_xml_test("flex", "flex_container_baseline_wrap_reverse_multiline_column__border_box_rtl"); + } + + #[test] + fn flex_container_baseline_wrap_reverse_multiline_column__content_box_rtl() { + crate::run_xml_test("flex", "flex_container_baseline_wrap_reverse_multiline_column__content_box_rtl"); + } + + #[test] + fn flex_container_baseline_wrap_reverse_multiline_text__border_box_ltr() { + crate::run_xml_test("flex", "flex_container_baseline_wrap_reverse_multiline_text__border_box_ltr"); + } + + #[test] + fn flex_container_baseline_wrap_reverse_multiline_text__content_box_ltr() { + crate::run_xml_test("flex", "flex_container_baseline_wrap_reverse_multiline_text__content_box_ltr"); + } + + #[test] + fn flex_container_baseline_wrap_reverse_multiline_text__border_box_rtl() { + crate::run_xml_test("flex", "flex_container_baseline_wrap_reverse_multiline_text__border_box_rtl"); + } + + #[test] + fn flex_container_baseline_wrap_reverse_multiline_text__content_box_rtl() { + crate::run_xml_test("flex", "flex_container_baseline_wrap_reverse_multiline_text__content_box_rtl"); + } + #[test] fn flex_direction_column__border_box_ltr() { crate::run_xml_test("flex", "flex_direction_column__border_box_ltr");