Auto merge of #13924 - cynicaldevil:text-overflow, r=emilio

implemented string-valued text-overflow

<!-- Please describe your changes on the following line: -->
---

<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #13709

<!-- Either: -->
- [x] There are tests for these changes

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

cc @Manishearth
The lorem-ipsum example from MDN works as expected.

<!-- Reviewable:start -->
---

This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/13924)

<!-- Reviewable:end -->

components/layout/fragment.rs

@@ -1037,12 +1037,15 @@ impl Fragment {
     }
 
     /// Transforms this fragment into an ellipsis fragment, preserving all the other data.
-    pub fn transform_into_ellipsis(&self, layout_context: &LayoutContext) -> Fragment {
+    pub fn transform_into_ellipsis(&self,
+                                   layout_context: &LayoutContext,
+                                   text_overflow_string: String)
+                                   -> Fragment {
         let mut unscanned_ellipsis_fragments = LinkedList::new();
         unscanned_ellipsis_fragments.push_back(self.transform(
                 self.border_box.size,
                 SpecificFragmentInfo::UnscannedText(
-                    box UnscannedTextFragmentInfo::new("…".to_owned(), None))));
+                    box UnscannedTextFragmentInfo::new(text_overflow_string, None))));
         let ellipsis_fragments = TextRunScanner::new().scan_for_runs(&mut layout_context.font_context(),
                                                                      unscanned_ellipsis_fragments);
         debug_assert!(ellipsis_fragments.len() == 1);

components/layout/inline.rs

@@ -31,10 +31,10 @@ use std::collections::VecDeque;
 use std::sync::Arc;
 use style::arc_ptr_eq;
 use style::computed_values::{display, overflow_x, position, text_align, text_justify};
-use style::computed_values::{text_overflow, vertical_align, white_space};
+use style::computed_values::{vertical_align, white_space};
 use style::context::{SharedStyleContext, StyleContext};
 use style::logical_geometry::{LogicalRect, LogicalSize, WritingMode};
-use style::properties::ServoComputedValues;
+use style::properties::{longhands, ServoComputedValues};
 use style::servo::restyle_damage::{BUBBLE_ISIZES, REFLOW, REFLOW_OUT_OF_FLOW, REPOSITION, RESOLVE_GENERATED_CONTENT};
 use text;
 use unicode_bidi;
@@ -684,21 +684,30 @@ impl LineBreaker {
         }
 
         // Determine if an ellipsis will be necessary to account for `text-overflow`.
-        let mut need_ellipsis = false;
         let available_inline_size = self.pending_line.green_zone.inline -
             self.pending_line.bounds.size.inline - indentation;
-        match (fragment.style().get_text().text_overflow,
-               fragment.style().get_box().overflow_x) {
-            (text_overflow::T::clip, _) | (_, overflow_x::T::visible) => {}
-            (text_overflow::T::ellipsis, _) => {
-                need_ellipsis = fragment.margin_box_inline_size() > available_inline_size;
-            }
-        }
 
-        if !need_ellipsis {
-            self.push_fragment_to_line_ignoring_text_overflow(fragment, layout_context);
-        } else {
-            let ellipsis = fragment.transform_into_ellipsis(layout_context);
+        let ellipsis = match (&fragment.style().get_text().text_overflow.first,
+            fragment.style().get_box().overflow_x) {
+            (&longhands::text_overflow::Side::Clip, _) | (_, overflow_x::T::visible) => None,
+            (&longhands::text_overflow::Side::Ellipsis, _) => {
+                if fragment.margin_box_inline_size() > available_inline_size {
+                    Some("…".to_string())
+                } else {
+                    None
+                }
+            },
+            (&longhands::text_overflow::Side::String(ref string), _) => {
+                if fragment.margin_box_inline_size() > available_inline_size {
+                    Some(string.to_string())
+                } else {
+                    None
+                }
+            }
+        };
+
+        if let Some(string) = ellipsis {
+            let ellipsis = fragment.transform_into_ellipsis(layout_context, string);
             if let Some(truncation_info) =
                     fragment.truncate_to_inline_size(available_inline_size -
                                                      ellipsis.margin_box_inline_size()) {
@@ -707,6 +716,8 @@ impl LineBreaker {
                 self.push_fragment_to_line_ignoring_text_overflow(fragment, layout_context);
             }
             self.push_fragment_to_line_ignoring_text_overflow(ellipsis, layout_context);
+        } else {
+            self.push_fragment_to_line_ignoring_text_overflow(fragment, layout_context);
         }
 
         if line_flush_mode == LineFlushMode::Flush {

components/style/properties/longhand/text.mako.rs

@@ -12,9 +12,6 @@
                                              Method("has_overline", "bool"),
                                              Method("has_line_through", "bool")]) %>
 
-% if product == "servo":
-    ${helpers.single_keyword("text-overflow", "clip ellipsis", animatable=False)}
-% else:
 <%helpers:longhand name="text-overflow" animatable="False">
     use std::fmt;
     use style_traits::ToCss;
@@ -93,7 +90,6 @@
         }
     }
 </%helpers:longhand>
-% endif
 
 ${helpers.single_keyword("unicode-bidi",
                          "normal embed isolate bidi-override isolate-override plaintext",

tests/wpt/mozilla/meta/MANIFEST.json

@@ -5496,18 +5496,6 @@
             "url": "/_mozilla/css/text_node_opacity.html"
           }
         ],
-        "css/text_overflow_a.html": [
-          {
-            "path": "css/text_overflow_a.html",
-            "references": [
-              [
-                "/_mozilla/css/text_overflow_ref.html",
-                "!="
-              ]
-            ],
-            "url": "/_mozilla/css/text_overflow_a.html"
-          }
-        ],
         "css/text_overflow_basic_a.html": [
           {
             "path": "css/text_overflow_basic_a.html",
@@ -5520,6 +5508,30 @@
             "url": "/_mozilla/css/text_overflow_basic_a.html"
           }
         ],
+        "css/text_overflow_ellipsis.html": [
+          {
+            "path": "css/text_overflow_ellipsis.html",
+            "references": [
+              [
+                "/_mozilla/css/text_overflow_ref.html",
+                "!="
+              ]
+            ],
+            "url": "/_mozilla/css/text_overflow_ellipsis.html"
+          }
+        ],
+        "css/text_overflow_string.html": [
+          {
+            "path": "css/text_overflow_string.html",
+            "references": [
+              [
+                "/_mozilla/css/text_overflow_ref.html",
+                "!="
+              ]
+            ],
+            "url": "/_mozilla/css/text_overflow_string.html"
+          }
+        ],
         "css/text_shadow_blur_a.html": [
           {
             "path": "css/text_shadow_blur_a.html",
@@ -20364,18 +20376,6 @@
           "url": "/_mozilla/css/text_node_opacity.html"
         }
       ],
-      "css/text_overflow_a.html": [
-        {
-          "path": "css/text_overflow_a.html",
-          "references": [
-            [
-              "/_mozilla/css/text_overflow_ref.html",
-              "!="
-            ]
-          ],
-          "url": "/_mozilla/css/text_overflow_a.html"
-        }
-      ],
       "css/text_overflow_basic_a.html": [
         {
           "path": "css/text_overflow_basic_a.html",
@@ -20388,6 +20388,30 @@
           "url": "/_mozilla/css/text_overflow_basic_a.html"
         }
       ],
+      "css/text_overflow_ellipsis.html": [
+        {
+          "path": "css/text_overflow_ellipsis.html",
+          "references": [
+            [
+              "/_mozilla/css/text_overflow_ref.html",
+              "!="
+            ]
+          ],
+          "url": "/_mozilla/css/text_overflow_ellipsis.html"
+        }
+      ],
+      "css/text_overflow_string.html": [
+        {
+          "path": "css/text_overflow_string.html",
+          "references": [
+            [
+              "/_mozilla/css/text_overflow_ref.html",
+              "!="
+            ]
+          ],
+          "url": "/_mozilla/css/text_overflow_string.html"
+        }
+      ],
       "css/text_shadow_blur_a.html": [
         {
           "path": "css/text_shadow_blur_a.html",

tests/wpt/mozilla/tests/css/text_overflow_ellipsis.html

@@ -8,14 +8,13 @@ p {
     background: gold;
     text-overflow: ellipsis;
 }
-#hideme {
+p.hidden {
     overflow: hidden;
 }
 </style>
 </head>
 <body>
-<p id=hideme>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
 <p>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
+<p class="hidden">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
 </body>
 </html>
-

tests/wpt/mozilla/tests/css/text_overflow_ref.html

@@ -13,5 +13,3 @@ p {
 <p>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
 </body>
 </html>
-
-

tests/wpt/mozilla/tests/css/text_overflow_string.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel=mismatch href=text_overflow_ref.html>
+<style>
+p {
+    width: 128px;
+    background: gold;
+    text-overflow: "[..]";
+}
+p.hidden {
+    overflow: hidden;
+}
+</style>
+</head>
+<body>
+<p>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
+<p class="hidden">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
+</body>
+</html>