Do not merge text fragments of differing colors

The display list item for a line of text has a single color assigned for it, so text fragments with different colors cannot be merged. There is no issue number for this, as far as I know. I found this while trying an internal program that uses red asterisks for required text fields.
servo · Jun 29, 2016 · 46396d7 · 46396d7
1 parent 0dc64da
commit 46396d7
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 7 deletions.
diff --git a/components/layout/fragment.rs b/components/layout/fragment.rs
@@ -38,9 +38,9 @@ use std::collections::LinkedList;
 use std::fmt;
 use std::sync::{Arc, Mutex};
 use style::computed_values::content::ContentItem;
-use style::computed_values::{border_collapse, clear, display, mix_blend_mode, overflow_wrap};
-use style::computed_values::{overflow_x, position, text_decoration, transform_style};
-use style::computed_values::{vertical_align, white_space, word_break, z_index};
+use style::computed_values::{border_collapse, clear, color, display, mix_blend_mode};
+use style::computed_values::{overflow_wrap, overflow_x, position, text_decoration};
+use style::computed_values::{transform_style, vertical_align, white_space, word_break, z_index};
 use style::dom::TRestyleDamage;
 use style::logical_geometry::{LogicalMargin, LogicalRect, LogicalSize, WritingMode};
 use style::properties::{ComputedValues, ServoComputedValues};
@@ -1304,6 +1304,10 @@ impl Fragment {
         self.style().get_inheritedtext().white_space
     }
 
+    pub fn color(&self) -> color::T {
+        self.style().get_color().color
+    }
+
     /// Returns the text decoration of this fragment, according to the style of the nearest ancestor
     /// element.
     ///
@@ -2042,7 +2046,8 @@ impl Fragment {
                 // FIXME: Should probably use a whitelist of styles that can safely differ (#3165)
                 if self.style().get_font() != other.style().get_font() ||
                         self.text_decoration() != other.text_decoration() ||
-                        self.white_space() != other.white_space() {
+                        self.white_space() != other.white_space() ||
+                        self.color() != other.color() {
                     return false
                 }
 

diff --git a/tests/wpt/metadata-css/css21_dev/html4/content-inherit-002.htm.ini b/tests/wpt/metadata-css/css21_dev/html4/content-inherit-002.htm.ini
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -1272,6 +1272,18 @@
             "url": "/_mozilla/css/clip_a.html"
           }
         ],
+        "css/content_color.html": [
+          {
+            "path": "css/content_color.html",
+            "references": [
+              [
+                "/_mozilla/css/content_color_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/content_color.html"
+          }
+        ],
         "css/counters_nested_a.html": [
           {
             "path": "css/counters_nested_a.html",
@@ -8360,6 +8372,18 @@
           "url": "/_mozilla/css/clip_a.html"
         }
       ],
+      "css/content_color.html": [
+        {
+          "path": "css/content_color.html",
+          "references": [
+            [
+              "/_mozilla/css/content_color_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/content_color.html"
+        }
+      ],
       "css/counters_nested_a.html": [
         {
           "path": "css/counters_nested_a.html",

diff --git a/tests/wpt/mozilla/tests/css/content_color.html b/tests/wpt/mozilla/tests/css/content_color.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Pseudo-elements can have color</title>
+<link rel="match" href="content_color_ref.html">
+<style>
+span:after{content:"B";color:red}
+</style>
+<span>A</span>
diff --git a/tests/wpt/mozilla/tests/css/content_color_ref.html b/tests/wpt/mozilla/tests/css/content_color_ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<title>This test should have a red B and a black A</title>
+<style>
+#a { float: left }
+#b { color: red }
+</style>
+<span id=a>A</span><span id=b>B</span>