Fully implement the "align descendants" rule for div.

This adds -servo-left and -servo-right to complement -servo-center.

This intentionally doesn't try to address issue #7301.

8 files changed, 193 insertions, 22 deletions

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 `<center>` 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
@@ -4254,6 +4254,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 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<link rel="match" href="div-align-ref.html">
+<style>
+.test { width: 50px; background-color: yellow; }
+.center { text-align: center; }
+.center .test { margin: 0 auto; }
+.left { text-align: left; }
+.left .test { margin-right: auto; }
+.right { text-align: right; }
+.right .test { margin-left: auto; }
+.rtl { direction: rtl; }
+.ltr { direction: ltr; }
+.left .margin { margin-left: 1em; }
+.right .margin { margin-right: 1em; }
+</style>
+</head>
+<body>
+<!-- Centered tests -->
+<div class=center>
+<div class=test>t א</div>
+<div class="test rtl">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div class=center>
+<div class="test left">t א</div>
+<div class="test right">t א</div>
+</div>
+
+<div class=left>
+<div class=center>
+<div class=test>t א</div>
+</div>
+</div>
+
+<!-- Left-aligned tests -->
+<div class=left>
+<div class=test>t א</div>
+<div class="test rtl">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div class="left rtl">
+<div class=test>t א</div>
+<div class="test ltr">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div class=left>
+<div class="test center">t א</div>
+<div class="test right">t א</div>
+</div>
+
+<!-- Right-aligned tests -->
+<div class=right>
+<div class=test>t א</div>
+<div class="test rtl">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div class="right rtl">
+<div class=test>t א</div>
+<div class="test ltr">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div class=right>
+<div class="test left">t א</div>
+<div class="test center">t א</div>
+</div>
+
+</body>
+</html>
+
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 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+.test { width: 50px; background-color: yellow; }
+.rtl { direction: rtl; }
+.ltr { direction: ltr; }
+[align=left] .margin { margin-left: 1em }
+[align=right] .margin { margin-right: 1em }
+</style>
+</head>
+<body>
+<!-- Centered tests -->
+<div align=center>
+<div class=test>t א</div>
+<div class="test rtl">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div align=center>
+<div class=test align=left>t א</div>
+<div class=test align=right>t א</div>
+</div>
+
+<div align=left>
+<div align=center>
+<div class=test>t א</div>
+</div>
+</div>
+
+<!-- Left-aligned tests -->
+<div align=left>
+<div class=test>t א</div>
+<div class="test rtl">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div align=left class=rtl>
+<div class=test>t א</div>
+<div class="test ltr">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div align=left>
+<div class=test align=center>t א</div>
+<div class=test align=right>t א</div>
+</div>
+
+<!-- Right-aligned tests -->
+<div align=right>
+<div class=test>t א</div>
+<div class="test rtl">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div align=right class=rtl>
+<div class=test>t א</div>
+<div class="test ltr">t א</div>
+<div class="test margin">t א</div>
+</div>
+
+<div align=right>
+<div class=test align=left>t א</div>
+<div class=test align=center>t א</div>
+</div>
+
+</body>
+</html>
+