diff --git a/components/layout/block.rs b/components/layout/block.rs index a0768b9d9aa..f580763e931 100644 --- a/components/layout/block.rs +++ b/components/layout/block.rs @@ -1466,8 +1466,9 @@ impl BlockFlow { // Per CSS 2.1 § 16.3.1, text alignment propagates to all children in flow. // - // TODO(#2018, pcwalton): Do this in the cascade instead. - flow::mut_base(kid).flags.propagate_text_alignment_from_parent(flags.clone()); + // TODO(#2265, pcwalton): Do this in the cascade instead. + let containing_block_text_align = self.fragment.style().get_inheritedtext().text_align; + flow::mut_base(kid).flags.set_text_align(containing_block_text_align); // Handle `text-indent` on behalf of any inline children that we have. This is // necessary because any percentages are relative to the containing block, which only @@ -2272,9 +2273,6 @@ pub trait ISizeAndMarginsComputer { (_, box_sizing::T::content_box) => {} } - // The text alignment of a block flow is the text alignment of its box's style. - block.base.flags.set_text_align(style.get_inheritedtext().text_align); - let margin = style.logical_margin(); let position = style.logical_position(); @@ -2438,6 +2436,7 @@ pub trait ISizeAndMarginsComputer { // Check for direction of parent flow (NOT Containing Block) let block_mode = block.base.writing_mode; let container_mode = block.base.block_container_writing_mode; + let block_align = block.base.flags.text_align(); // FIXME (mbrubeck): Handle vertical writing modes. let parent_has_same_direction = container_mode.is_bidi_ltr() == block_mode.is_bidi_ltr(); @@ -2466,20 +2465,23 @@ pub trait ISizeAndMarginsComputer { (MaybeAuto::Specified(margin_start), MaybeAuto::Specified(inline_size), MaybeAuto::Specified(margin_end)) => { - match (input.text_align, parent_has_same_direction) { - (text_align::T::servo_center, _) => { - // This is used for `
` and friends per HTML5 § 14.3.3. Make the - // inline-start and inline-end margins equal per HTML5 § 14.2. - let margin = (available_inline_size - inline_size).scale_by(0.5); - (margin, inline_size, margin) - } - (_, true) => { - // Ignore the end margin. + // servo_left, servo_right, and servo_center are used to implement + // the "align descendants" rule in HTML5 § 14.2. + if block_align == text_align::T::servo_center { + // Ignore any existing margins, and make the inline-start and + // inline-end margins equal. + let margin = (available_inline_size - inline_size).scale_by(0.5); + (margin, inline_size, margin) + } else { + let ignore_end_margin = match block_align { + text_align::T::servo_left => block_mode.is_bidi_ltr(), + text_align::T::servo_right => !block_mode.is_bidi_ltr(), + _ => parent_has_same_direction, + }; + if ignore_end_margin { (margin_start, inline_size, available_inline_size - (margin_start + inline_size)) - } - (_, false) => { - // Ignore the start margin. + } else { (available_inline_size - (margin_end + inline_size), inline_size, margin_end) diff --git a/components/layout/flow.rs b/components/layout/flow.rs index dfca7f35053..b9e0a564b92 100644 --- a/components/layout/flow.rs +++ b/components/layout/flow.rs @@ -656,14 +656,6 @@ static HAS_FLOATED_DESCENDANTS_BITMASK: FlowFlags = FlowFlags { bits: 0b0000_001 static TEXT_ALIGN_SHIFT: usize = 11; impl FlowFlags { - /// Propagates text alignment flags from an appropriate parent flow per CSS 2.1. - /// - /// FIXME(#2265, pcwalton): It would be cleaner and faster to make this a derived CSS property - /// `-servo-text-align-in-effect`. - pub fn propagate_text_alignment_from_parent(&mut self, parent_flags: FlowFlags) { - self.set_text_align_override(parent_flags); - } - #[inline] pub fn text_align(self) -> text_align::T { text_align::T::from_u32((self & TEXT_ALIGN).bits() >> TEXT_ALIGN_SHIFT).unwrap() @@ -675,11 +667,6 @@ impl FlowFlags { FlowFlags::from_bits(value.to_u32() << TEXT_ALIGN_SHIFT).unwrap(); } - #[inline] - pub fn set_text_align_override(&mut self, parent: FlowFlags) { - self.insert(parent & TEXT_ALIGN); - } - #[inline] pub fn union_floated_descendants_flags(&mut self, other: FlowFlags) { self.insert(other & HAS_FLOATED_DESCENDANTS_BITMASK); diff --git a/components/layout/inline.rs b/components/layout/inline.rs index 1f86ac09405..73c9fc32489 100644 --- a/components/layout/inline.rs +++ b/components/layout/inline.rs @@ -1019,8 +1019,14 @@ impl InlineFlow { // Translate `left` and `right` to logical directions. let is_ltr = fragments.fragments[0].style().writing_mode.is_bidi_ltr(); let line_align = match (line_align, is_ltr) { - (text_align::T::left, true) | (text_align::T::right, false) => text_align::T::start, - (text_align::T::left, false) | (text_align::T::right, true) => text_align::T::end, + (text_align::T::left, true) | + (text_align::T::servo_left, true) | + (text_align::T::right, false) | + (text_align::T::servo_right, false) => text_align::T::start, + (text_align::T::left, false) | + (text_align::T::servo_left, false) | + (text_align::T::right, true) | + (text_align::T::servo_right, true) => text_align::T::end, _ => line_align }; @@ -1040,7 +1046,10 @@ impl InlineFlow { inline_start_position_for_fragment = inline_start_position_for_fragment + slack_inline_size } - text_align::T::left | text_align::T::right => unreachable!() + text_align::T::left | + text_align::T::servo_left | + text_align::T::right | + text_align::T::servo_right => unreachable!() } // Lay out the fragments in visual order. diff --git a/components/style/properties.mako.rs b/components/style/properties.mako.rs index 86d553871b8..9ce6462141e 100644 --- a/components/style/properties.mako.rs +++ b/components/style/properties.mako.rs @@ -2012,6 +2012,8 @@ pub mod longhands { center("center") => 4, justify("justify") => 5, servo_center("-servo-center") => 6, + servo_left("-servo-left") => 7, + servo_right("-servo-right") => 8, } } #[inline] pub fn get_initial_value() -> computed_value::T { diff --git a/resources/presentational-hints.css b/resources/presentational-hints.css index a22560b9e32..2c4cb2a9242 100644 --- a/resources/presentational-hints.css +++ b/resources/presentational-hints.css @@ -7,12 +7,9 @@ https://html.spec.whatwg.org/multipage/#presentational-hints pre[wrap] { white-space: pre-wrap; } -/* -FIXME: also "align descendants" -https://html.spec.whatwg.org/multipage/#align-descendants -*/ -div[align=left i] { text-align: left; } -div[align=right i] { text-align: right; } +div[align=left i] { text-align: -servo-left; } +div[align=right i] { text-align: -servo-right; } +div[align=center i], div[align=middle i] { text-align: -servo-center; } div[align=justify i] { text-align: justify; } diff --git a/resources/servo.css b/resources/servo.css index e0c65f86bdf..5fdc469b699 100644 --- a/resources/servo.css +++ b/resources/servo.css @@ -29,5 +29,5 @@ td[align="left"] { text-align: left; } td[align="center"] { text-align: center; } td[align="right"] { text-align: right; } -center, div[align=center i], div[align=middle i] { text-align: -servo-center; } +center { text-align: -servo-center; } diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json index 5ba72234bf3..fea92c1daa1 100644 --- a/tests/wpt/metadata/MANIFEST.json +++ b/tests/wpt/metadata/MANIFEST.json @@ -4285,6 +4285,16 @@ ], "url": "/html/rendering/non-replaced-elements/flow-content-0/figure.html" }, + { + "path": "html/rendering/non-replaced-elements/flow-content-0/div-align.html", + "references": [ + [ + "/html/rendering/non-replaced-elements/flow-content-0/div-align-ref.html", + "==" + ] + ], + "url": "/html/rendering/non-replaced-elements/flow-content-0/div-align.html" + }, { "path": "html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-a.html", "references": [ diff --git a/tests/wpt/web-platform-tests/html/rendering/non-replaced-elements/flow-content-0/div-align-ref.html b/tests/wpt/web-platform-tests/html/rendering/non-replaced-elements/flow-content-0/div-align-ref.html new file mode 100644 index 00000000000..3f2fbca317c --- /dev/null +++ b/tests/wpt/web-platform-tests/html/rendering/non-replaced-elements/flow-content-0/div-align-ref.html @@ -0,0 +1,77 @@ + + + + + + + + + +
+
t א
+
t א
+
t א
+
+ +
+
t א
+
t א
+
+ +
+
+
t א
+
+
+ + +
+
t א
+
t א
+
t א
+
+ +
+
t א
+
t א
+
t א
+
+ +
+
t א
+
t א
+
+ + +
+
t א
+
t א
+
t א
+
+ +
+
t א
+
t א
+
t א
+
+ +
+
t א
+
t א
+
+ + + + diff --git a/tests/wpt/web-platform-tests/html/rendering/non-replaced-elements/flow-content-0/div-align.html b/tests/wpt/web-platform-tests/html/rendering/non-replaced-elements/flow-content-0/div-align.html new file mode 100644 index 00000000000..67ab68e5899 --- /dev/null +++ b/tests/wpt/web-platform-tests/html/rendering/non-replaced-elements/flow-content-0/div-align.html @@ -0,0 +1,70 @@ + + + + + + + + +
+
t א
+
t א
+
t א
+
+ +
+
t א
+
t א
+
+ +
+
+
t א
+
+
+ + +
+
t א
+
t א
+
t א
+
+ +
+
t א
+
t א
+
t א
+
+ +
+
t א
+
t א
+
+ + +
+
t א
+
t א
+
t א
+
+ +
+
t א
+
t א
+
t א
+
+ +
+
t א
+
t א
+
+ + + +