CSS highlight processing model

This patch implements the inheritance-based propagation for highlight pseudo-elements, as described in css-pseudo’s #highlight-cascade and introduced in w3c/csswg-drafts#2474. Highlight pseudos like ::selection were historically implemented such that only the ::selection selector (*::selection) worked intuitively. The spec’s processing model essentially makes it possible to define both general ::selection styles and more specific ::selection styles. We add a feature (HighlightInheritance) and a new computed style extra field of type scoped_refptr<StyleHighlightData>, which in turn points to four refcounted ComputedStyle instances, one for each highlight. Only a handful of properties are applicable, but reusing ComputedStyle like this simplifies the applying code, and allows us to share many of the field groups between instances anyway. We update the initial style singleton to point to a set of four empty highlight styles, which we only use when the feature is enabled. When the feature is disabled (or resolving custom ::highlight styles), there is no functional change. Highlight styles are lazily computed on paint’s demand, inherit only from the originating element styles, and we store the result in the Element’s pseudo cache (StyleCachedData). When the feature is enabled, we compute highlight styles during the originating element’s recalc (RecalcOwnStyle), skipping any highlight pseudos that the element had no matching rules for (a question that can already be answered thanks to pseudo bits). Style resolution is largely unchanged: we start with default styles, then use output of the cascade to change those styles. But defaulting is much easier for highlight styles: all properties are inherited, so we can simply clone the whole ComputedStyle. Relevant test page and screenshots: • https://bucket.daz.cat/work/igalia/0/8.html • https://bucket.daz.cat/4f37833aa15299a5.png (before) • https://bucket.daz.cat/67d2abdd9bcda17c.png (after) WPT already has some tests (css/css-pseudo/cascade-highlight-*), but more thorough test coverage will land in these patches: • #30688 • #30692 Bug: 1024156 Change-Id: I1f54f36ef2ac80165261a3f80d3a21cdf359c199 Cq-Do-Not-Cancel-Tryjobs: true
web-platform-tests · Sep 16, 2021 · ea63054 · ea63054
1 parent e87cd77
commit ea63054
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/css/css-pseudo/active-selection-012.html b/css/css-pseudo/active-selection-012.html
@@ -24,6 +24,7 @@
   div::selection
     {
       background-color: green;
+      color: aqua;
     }
 
   /*
@@ -47,6 +48,6 @@
 
   <body onload="startTest();">
 
-  <p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is fuchsia.
+  <p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is aqua and <strong>not fuchsia</strong>.
 
   <div id="test" class="highlight_reftest">Selected Text</div>
diff --git a/css/css-pseudo/reference/active-selection-012-ref.html b/css/css-pseudo/reference/active-selection-012-ref.html
@@ -11,12 +11,12 @@
   div
     {
       background-color: green;
-      color: fuchsia;
+      color: aqua;
       display: inline;
       font-size: 300%;
     }
   </style>
 
-  <p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is fuchsia.
+  <p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is aqua and <strong>not fuchsia</strong>.
 
   <div class="highlight_reftest">Selected Text</div>