[css-pseudo-4] Clarify painting order of highlight text decoration, allow ::selection stacked at the top. w3c#6022

Author: fantasai

css-pseudo-4/Overview.bs

@@ -928,6 +928,42 @@ Text and Text Decorations</h4>
   are stacked in the same order as their backgrounds
   over the text’s original decorations
   and are all drawn, each decoration in its own color.
+  The normal painting order applies,
+  so as per <a href="https://www.w3.org/TR/CSS2/zindex.html#painting-order">CSS2 Appendix E</a>,
+  all underlines are drawn
+  below overlines which are drawn
+  below the text which is drawn
+  below any line-throughs.
+  However, text decorations applied by ''::selection''
+  may instead all be drawn
+  along with the text
+  as a topmost set of layers
+  above all other decorations.
+
+  <div class="example">
+    For example, assuming the original text has an underline and a strike-through,
+    that ''::selection'' applies an underline
+    and ''::target-text'' appplies both overline and strike-through,
+    the following are both conformant painting orders:
+    <div style="columns: 20em">
+      <ol style="break-inside: avoid; margin-top: 0;">
+        <li>original underline
+        <li>''::selection'' underline
+        <li>''::target-text'' overline
+        <li>''::selection''-colored text
+        <li>original strike-through
+        <li>''::target-text'' strike-through
+      </ol>
+      <ol style="break-inside: avoid; margin-top: 0;">
+        <li>original underline
+        <li>''::target-text'' overline
+        <li>original strike-through
+        <li>''::target-text'' strike-through
+        <li>''::selection'' underline
+        <li>''::selection''-colored text
+      </ol>
+    </div>
+  </div>
 
 <h4 id="highlight-replaced">
 Replaced Elements</h4>