[css-pseudo-4] Add new pseudo-element ::search-text #10212 #10213

See #10475

Co-authored-by: Jihye Hong <jihye@igalia.com>

Author: fantasai

css-pseudo-4/Overview.bs

@@ -640,7 +640,7 @@ Styling the First-Letter Pseudo-elements</h4>
 Highlight Pseudo-elements</h2>
 
 <h3 id="highlight-selectors">
-Selecting Highlighted Content: the ''::selection'',  ''::target-text'', ''::spelling-error'', ''::grammar-error'', and ''::highlight()'' pseudo-elements</h3>
+Selecting Highlighted Content: the ''::selection'', ''::search-text'', ''::target-text'', ''::spelling-error'', ''::grammar-error'', and ''::highlight()'' pseudo-elements</h3>
 
   <wpt>
     grammar-spelling-errors-001.html
@@ -738,6 +738,16 @@ Selecting Highlighted Content: the ''::selection'',  ''::target-text'', ''::spel
       textpath-selection-011.html
       </wpt>
 
+    <dt><dfn>::search-text</dfn>
+    <dd>
+       The ''::search-text'' pseudo-element represents text
+       identified by the user agent’s find-in-page feature.
+       Since not all UAs style matched text in ways
+       expressible with the [=highlight pseudo-elements=],
+       this pseudo-element is optional to implement.
+
+       Issue(10527): How to identify the current match?
+
     <dt><dfn>::target-text</dfn>
     <dd>
       The ''::target-text'' pseudo-element represents text
@@ -1210,6 +1220,9 @@ Backgrounds</h4>
   over the ''::spelling-error'' overlay
   which is drawn over the ''::grammar-error'' overlay
   which is drawn over the ''::highlight'' overlays.
+  The ''::search-text'' overlay is drawn directly over or below
+  the '':selection'' overlay depending on the UA,
+  and drawn over all other overlays.
 
   <wpt>
   selection-overlay-and-grammar-001.html