Auto merge of #7825 - eefriedman:div-align, r=mbrubeck

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.~~  Commit added to address #7301.

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/7825)
<!-- Reviewable:end -->

9 files changed, 194 insertions, 40 deletions

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 `<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.
+                    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()
@@ -676,11 +668,6 @@ impl FlowFlags {
     }
 
     #[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
@@ -4286,6 +4286,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>
+