diff --git a/components/layout/block.rs b/components/layout/block.rs index 890353b7a10..d8fef85da84 100644 --- a/components/layout/block.rs +++ b/components/layout/block.rs @@ -2470,20 +2470,26 @@ 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. + // FIXME(#7301): block_align is supposed to be the text-align of the + // parent, not the current node. + let block_align = input.text_align; + 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/inline.rs b/components/layout/inline.rs index 5692ffa93df..1ede2a0b6cb 100644 --- a/components/layout/inline.rs +++ b/components/layout/inline.rs @@ -1018,8 +1018,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 }; @@ -1039,7 +1045,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 df4f7380526..40db8387eb9 100644 --- a/components/style/properties.mako.rs +++ b/components/style/properties.mako.rs @@ -2020,6 +2020,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 fa71579187f..e86b6e17d30 100644 --- a/resources/servo.css +++ b/resources/servo.css @@ -24,5 +24,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 f291aeae279..6fcf54002ae 100644 --- a/tests/wpt/metadata/MANIFEST.json +++ b/tests/wpt/metadata/MANIFEST.json @@ -4253,6 +4253,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 א
+
+ + + +