diff --git a/components/layout_2020/positioned.rs b/components/layout_2020/positioned.rs index 397f8707b61..5f5bfee52e9 100644 --- a/components/layout_2020/positioned.rs +++ b/components/layout_2020/positioned.rs @@ -632,8 +632,20 @@ impl HoistedAbsolutelyPositionedBox { let pb = pbm.padding + pbm.border; let margin_rect_size = content_size + pbm.padding_border_sums + margin.sum(); - let inline_origin = inline_axis_solver.origin_for_margin_box(margin_rect_size.inline); - let block_origin = block_axis_solver.origin_for_margin_box(margin_rect_size.block); + let inline_origin = inline_axis_solver.origin_for_margin_box( + AxisDirection::Inline, + margin_rect_size.inline, + style.writing_mode, + shared_fragment.original_parent_writing_mode, + containing_block_writing_mode, + ); + let block_origin = block_axis_solver.origin_for_margin_box( + AxisDirection::Block, + margin_rect_size.block, + style.writing_mode, + shared_fragment.original_parent_writing_mode, + containing_block_writing_mode, + ); let content_rect = LogicalRect { start_corner: LogicalVec2 { @@ -868,12 +880,23 @@ impl<'a> AbsoluteAxisSolver<'a> { result } - fn origin_for_margin_box(&self, size: Au) -> Au { - let (alignment_container, flip_anchor) = match ( + fn origin_for_margin_box( + &self, + axis: AxisDirection, + size: Au, + self_writing_mode: WritingMode, + original_parent_writing_mode: WritingMode, + containing_block_writing_mode: WritingMode, + ) -> Au { + let (alignment_container, alignment_container_writing_mode, flip_anchor) = match ( self.box_offsets.start.non_auto(), self.box_offsets.end.non_auto(), ) { - (None, None) => (self.static_position_rect_axis, self.flip_anchor), + (None, None) => ( + self.static_position_rect_axis, + original_parent_writing_mode, + self.flip_anchor, + ), (Some(start), Some(end)) => { let start = start.to_used_value(self.containing_size); let end = end.to_used_value(self.containing_size); @@ -881,7 +904,7 @@ impl<'a> AbsoluteAxisSolver<'a> { origin: start, length: self.containing_size - (end + start), }; - (alignment_container, false) + (alignment_container, containing_block_writing_mode, false) }, // If a single offset is auto, for alignment purposes it resolves to the amount // that makes the inset-modified containing block be exactly as big as the abspos. @@ -892,21 +915,49 @@ impl<'a> AbsoluteAxisSolver<'a> { }, }; + assert_eq!( + self_writing_mode.is_horizontal(), + original_parent_writing_mode.is_horizontal(), + "Mixed horizontal and vertical writing modes are not supported yet" + ); + assert_eq!( + self_writing_mode.is_horizontal(), + containing_block_writing_mode.is_horizontal(), + "Mixed horizontal and vertical writing modes are not supported yet" + ); + let self_value_matches_container = || { + axis == AxisDirection::Block || + self_writing_mode.is_bidi_ltr() == alignment_container_writing_mode.is_bidi_ltr() + }; + // Here we resolve the alignment to either start, center, or end. // Note we need to handle both self-alignment values (when some inset isn't auto) // and distributed alignment values (when both insets are auto). // The latter are treated as their fallback alignment. let alignment = match self.alignment.value() { - // https://drafts.csswg.org/css-align/#valdef-self-position-end - // https://drafts.csswg.org/css-align/#valdef-self-position-flex-end - AlignFlags::END | AlignFlags::FLEX_END => AlignFlags::END, // https://drafts.csswg.org/css-align/#valdef-self-position-center // https://drafts.csswg.org/css-align/#valdef-align-content-space-around // https://drafts.csswg.org/css-align/#valdef-align-content-space-evenly AlignFlags::CENTER | AlignFlags::SPACE_AROUND | AlignFlags::SPACE_EVENLY => { AlignFlags::CENTER }, - // TODO(#34282): handle missing values: self-start, self-end, left, right. + // https://drafts.csswg.org/css-align/#valdef-self-position-self-start + AlignFlags::SELF_START if self_value_matches_container() => AlignFlags::START, + AlignFlags::SELF_START => AlignFlags::END, + // https://drafts.csswg.org/css-align/#valdef-self-position-self-end + AlignFlags::SELF_END if self_value_matches_container() => AlignFlags::END, + AlignFlags::SELF_END => AlignFlags::START, + // https://drafts.csswg.org/css-align/#valdef-justify-content-left + AlignFlags::LEFT if alignment_container_writing_mode.is_bidi_ltr() => AlignFlags::START, + AlignFlags::LEFT => AlignFlags::END, + // https://drafts.csswg.org/css-align/#valdef-justify-content-right + AlignFlags::RIGHT if alignment_container_writing_mode.is_bidi_ltr() => AlignFlags::END, + AlignFlags::RIGHT => AlignFlags::START, + // https://drafts.csswg.org/css-align/#valdef-self-position-end + // https://drafts.csswg.org/css-align/#valdef-self-position-flex-end + AlignFlags::END | AlignFlags::FLEX_END => AlignFlags::END, + // https://drafts.csswg.org/css-align/#valdef-self-position-start + // https://drafts.csswg.org/css-align/#valdef-self-position-flex-start _ => AlignFlags::START, }; diff --git a/tests/wpt/meta/css/css-align/abspos/align-self-htb-ltr-htb.html.ini b/tests/wpt/meta/css/css-align/abspos/align-self-htb-ltr-htb.html.ini index 9e71a6e7b4f..fee3c215bac 100644 --- a/tests/wpt/meta/css/css-align/abspos/align-self-htb-ltr-htb.html.ini +++ b/tests/wpt/meta/css/css-align/abspos/align-self-htb-ltr-htb.html.ini @@ -2,11 +2,5 @@ [.item 5] expected: FAIL - [.item 7] - expected: FAIL - [.item 13] expected: FAIL - - [.item 15] - expected: FAIL diff --git a/tests/wpt/meta/css/css-align/abspos/align-self-htb-ltr-vlr.html.ini b/tests/wpt/meta/css/css-align/abspos/align-self-htb-ltr-vlr.html.ini index 2e97d601891..95c538d31bb 100644 --- a/tests/wpt/meta/css/css-align/abspos/align-self-htb-ltr-vlr.html.ini +++ b/tests/wpt/meta/css/css-align/abspos/align-self-htb-ltr-vlr.html.ini @@ -2,11 +2,11 @@ [.item 5] expected: FAIL - [.item 7] - expected: FAIL - [.item 13] expected: FAIL [.item 14] expected: FAIL + + [.item 15] + expected: FAIL diff --git a/tests/wpt/meta/css/css-align/abspos/align-self-htb-ltr-vrl.html.ini b/tests/wpt/meta/css/css-align/abspos/align-self-htb-ltr-vrl.html.ini index c00f13125fd..146577796d5 100644 --- a/tests/wpt/meta/css/css-align/abspos/align-self-htb-ltr-vrl.html.ini +++ b/tests/wpt/meta/css/css-align/abspos/align-self-htb-ltr-vrl.html.ini @@ -2,11 +2,11 @@ [.item 5] expected: FAIL - [.item 7] - expected: FAIL - [.item 13] expected: FAIL [.item 14] expected: FAIL + + [.item 15] + expected: FAIL diff --git a/tests/wpt/meta/css/css-align/abspos/align-self-htb-rtl-htb.html.ini b/tests/wpt/meta/css/css-align/abspos/align-self-htb-rtl-htb.html.ini index d77f5125299..0a01395fd1a 100644 --- a/tests/wpt/meta/css/css-align/abspos/align-self-htb-rtl-htb.html.ini +++ b/tests/wpt/meta/css/css-align/abspos/align-self-htb-rtl-htb.html.ini @@ -2,11 +2,5 @@ [.item 5] expected: FAIL - [.item 7] - expected: FAIL - [.item 13] expected: FAIL - - [.item 15] - expected: FAIL diff --git a/tests/wpt/meta/css/css-align/abspos/align-self-htb-rtl-vlr.html.ini b/tests/wpt/meta/css/css-align/abspos/align-self-htb-rtl-vlr.html.ini index 65c11d01926..8f9553700b7 100644 --- a/tests/wpt/meta/css/css-align/abspos/align-self-htb-rtl-vlr.html.ini +++ b/tests/wpt/meta/css/css-align/abspos/align-self-htb-rtl-vlr.html.ini @@ -2,11 +2,11 @@ [.item 5] expected: FAIL - [.item 7] - expected: FAIL - [.item 13] expected: FAIL [.item 14] expected: FAIL + + [.item 15] + expected: FAIL diff --git a/tests/wpt/meta/css/css-align/abspos/align-self-htb-rtl-vrl.html.ini b/tests/wpt/meta/css/css-align/abspos/align-self-htb-rtl-vrl.html.ini index 17e8b81059c..0ed1525f88b 100644 --- a/tests/wpt/meta/css/css-align/abspos/align-self-htb-rtl-vrl.html.ini +++ b/tests/wpt/meta/css/css-align/abspos/align-self-htb-rtl-vrl.html.ini @@ -2,11 +2,11 @@ [.item 5] expected: FAIL - [.item 7] - expected: FAIL - [.item 13] expected: FAIL [.item 14] expected: FAIL + + [.item 15] + expected: FAIL diff --git a/tests/wpt/meta/css/css-align/abspos/justify-self-htb-ltr-htb.html.ini b/tests/wpt/meta/css/css-align/abspos/justify-self-htb-ltr-htb.html.ini index 36cc6bc1497..62969664604 100644 --- a/tests/wpt/meta/css/css-align/abspos/justify-self-htb-ltr-htb.html.ini +++ b/tests/wpt/meta/css/css-align/abspos/justify-self-htb-ltr-htb.html.ini @@ -2,17 +2,5 @@ [.item 5] expected: FAIL - [.item 7] - expected: FAIL - - [.item 9] - expected: FAIL - [.item 15] expected: FAIL - - [.item 16] - expected: FAIL - - [.item 19] - expected: FAIL diff --git a/tests/wpt/meta/css/css-align/abspos/justify-self-htb-ltr-vlr.html.ini b/tests/wpt/meta/css/css-align/abspos/justify-self-htb-ltr-vlr.html.ini index b0f5ff3c788..e0aaa0db744 100644 --- a/tests/wpt/meta/css/css-align/abspos/justify-self-htb-ltr-vlr.html.ini +++ b/tests/wpt/meta/css/css-align/abspos/justify-self-htb-ltr-vlr.html.ini @@ -2,17 +2,11 @@ [.item 5] expected: FAIL - [.item 7] - expected: FAIL - - [.item 9] - expected: FAIL - [.item 15] expected: FAIL [.item 17] expected: FAIL - [.item 19] + [.item 16] expected: FAIL diff --git a/tests/wpt/meta/css/css-align/abspos/justify-self-htb-ltr-vrl.html.ini b/tests/wpt/meta/css/css-align/abspos/justify-self-htb-ltr-vrl.html.ini index 21d63104f3b..b671e2a5e68 100644 --- a/tests/wpt/meta/css/css-align/abspos/justify-self-htb-ltr-vrl.html.ini +++ b/tests/wpt/meta/css/css-align/abspos/justify-self-htb-ltr-vrl.html.ini @@ -5,14 +5,8 @@ [.item 6] expected: FAIL - [.item 9] - expected: FAIL - [.item 15] expected: FAIL - [.item 16] - expected: FAIL - - [.item 19] + [.item 7] expected: FAIL diff --git a/tests/wpt/meta/css/css-align/abspos/justify-self-htb-rtl-htb.html.ini b/tests/wpt/meta/css/css-align/abspos/justify-self-htb-rtl-htb.html.ini index 9cdebf2ee22..96500605016 100644 --- a/tests/wpt/meta/css/css-align/abspos/justify-self-htb-rtl-htb.html.ini +++ b/tests/wpt/meta/css/css-align/abspos/justify-self-htb-rtl-htb.html.ini @@ -2,17 +2,5 @@ [.item 5] expected: FAIL - [.item 6] - expected: FAIL - - [.item 8] - expected: FAIL - [.item 15] expected: FAIL - - [.item 17] - expected: FAIL - - [.item 18] - expected: FAIL diff --git a/tests/wpt/meta/css/css-align/abspos/justify-self-htb-rtl-vlr.html.ini b/tests/wpt/meta/css/css-align/abspos/justify-self-htb-rtl-vlr.html.ini index 67309fa98b8..fb7560bdcb6 100644 --- a/tests/wpt/meta/css/css-align/abspos/justify-self-htb-rtl-vlr.html.ini +++ b/tests/wpt/meta/css/css-align/abspos/justify-self-htb-rtl-vlr.html.ini @@ -2,17 +2,11 @@ [.item 5] expected: FAIL - [.item 6] - expected: FAIL - - [.item 8] - expected: FAIL - [.item 15] expected: FAIL [.item 16] expected: FAIL - [.item 18] + [.item 17] expected: FAIL diff --git a/tests/wpt/meta/css/css-align/abspos/justify-self-htb-rtl-vrl.html.ini b/tests/wpt/meta/css/css-align/abspos/justify-self-htb-rtl-vrl.html.ini index 414415ee191..44bd19585ef 100644 --- a/tests/wpt/meta/css/css-align/abspos/justify-self-htb-rtl-vrl.html.ini +++ b/tests/wpt/meta/css/css-align/abspos/justify-self-htb-rtl-vrl.html.ini @@ -5,14 +5,8 @@ [.item 7] expected: FAIL - [.item 8] - expected: FAIL - [.item 15] expected: FAIL - [.item 17] - expected: FAIL - - [.item 18] + [.item 6] expected: FAIL