diff --git a/components/layout_2020/flexbox/layout.rs b/components/layout_2020/flexbox/layout.rs index bbe22d9556f..15ac771b45c 100644 --- a/components/layout_2020/flexbox/layout.rs +++ b/components/layout_2020/flexbox/layout.rs @@ -1554,6 +1554,7 @@ impl InitialFlexLineLayout<'_> { .baseline_relative_to_margin_box .unwrap_or_default(), shared_alignment_baseline.unwrap_or_default(), + flex_context.flex_wrap_reverse, ); let start_corner = FlexRelativeVec2 { @@ -1886,24 +1887,34 @@ impl FlexItem<'_> { line_cross_size: Au, propagated_baseline: Au, max_propagated_baseline: Au, + wrap_reverse: bool, ) -> Au { + let ending_alignment = line_cross_size - *used_cross_size - self.pbm_auto_is_zero.cross; let outer_cross_start = if self.margin.cross_start.is_auto() || self.margin.cross_end.is_auto() { Au::zero() } else { match self.align_self.0.value() { - AlignFlags::STRETCH | AlignFlags::FLEX_START => Au::zero(), - AlignFlags::FLEX_END => { - let margin_box_cross = *used_cross_size + self.pbm_auto_is_zero.cross; - line_cross_size - margin_box_cross - }, - AlignFlags::CENTER => { - let margin_box_cross = *used_cross_size + self.pbm_auto_is_zero.cross; - (line_cross_size - margin_box_cross) / 2 - }, + AlignFlags::FLEX_START | AlignFlags::STRETCH => Au::zero(), + AlignFlags::FLEX_END => ending_alignment, + AlignFlags::CENTER => ending_alignment / 2, AlignFlags::BASELINE | AlignFlags::LAST_BASELINE => { max_propagated_baseline - propagated_baseline }, + AlignFlags::START => { + if !wrap_reverse { + Au::zero() + } else { + ending_alignment + } + }, + AlignFlags::END => { + if !wrap_reverse { + ending_alignment + } else { + Au::zero() + } + }, _ => Au::zero(), } }; diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json index e537af17ef9..2af8bef9258 100644 --- a/tests/wpt/meta/MANIFEST.json +++ b/tests/wpt/meta/MANIFEST.json @@ -122594,6 +122594,19 @@ ], {} ] + ], + "self-align-start-end-flex-001.html": [ + "e8ce996f40dd985b8d4d064bdb1bca3e8dfba8a0", + [ + null, + [ + [ + "/css/css-align/self-alignment/self-align-start-end-flex-001-ref.html", + "==" + ] + ], + {} + ] ] } }, @@ -393249,6 +393262,10 @@ "self-align-safe-unsafe-grid-003-ref.html": [ "0d0b17977d291bcc98874f34eb5364e819050dcc", [] + ], + "self-align-start-end-flex-001-ref.html": [ + "1b8c2558c316b20177e5b6c6615193b7e9e978cf", + [] ] } }, diff --git a/tests/wpt/tests/css/css-align/self-alignment/self-align-start-end-flex-001-ref.html b/tests/wpt/tests/css/css-align/self-alignment/self-align-start-end-flex-001-ref.html new file mode 100644 index 00000000000..1b8c2558c31 --- /dev/null +++ b/tests/wpt/tests/css/css-align/self-alignment/self-align-start-end-flex-001-ref.html @@ -0,0 +1,70 @@ + + + + + + CSS Reftest Reference + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
start
+
a b c d e f
+
end
+
a b c d e f
+
+
+
start
+
a b c d e f
+
end
+
a b c d e f
+
start
+
a b c d e f
+
end
+
a b c d e f
+
+ + diff --git a/tests/wpt/tests/css/css-align/self-alignment/self-align-start-end-flex-001.html b/tests/wpt/tests/css/css-align/self-alignment/self-align-start-end-flex-001.html new file mode 100644 index 00000000000..e8ce996f40d --- /dev/null +++ b/tests/wpt/tests/css/css-align/self-alignment/self-align-start-end-flex-001.html @@ -0,0 +1,93 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' 'start' and 'end' property values on flex items that are blocks, in a horizontal flex container + + + + + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
start
+
a b c d e f
+
end
+
a b c d e f
+
+
+
start
+
a b c d e f
+
end
+
a b c d e f
+
start
+
a b c d e f
+
end
+
a b c d e f
+
+ +