1 files changed, 69 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-pseudo/README.md b/testing/web-platform/tests/css/css-pseudo/README.md
new file mode 100644
index 0000000000..200d92cc59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/README.md
@@ -0,0 +1,69 @@
+## Highlight pseudos
+
+There are many subtle browser differences in rendering these pseudo-elements,
+most of which comply with the specs, so here are some hints.
+
+Use the helpers in `support/highlights.css` and `support/selections.js` where
+possible. They include rules and functions for “basic” but tricky tasks like
+setting up a test area, selecting content, and triggering spellcheck.
+
+When creating complex layered references, start by wrapping your text in a
+relative container, then prepend absolute layers with copies of that text, then
+mark up those copies with spans. Make everything transparent initially, and set
+visible styles on the spans only. The absolute layers will perfectly overlap
+your original text, which you can keep for external layout. For example:
+
+```html
+<div class="container">
+    <div class="spelling-error"><span>Teh</span> <span>dgo</span> and
+        <span>teh</span> <span>sphixn</span>.</div>
+    <div class="selection">Teh d<span>go and te</span>h sphixn.</div>
+    Teh dgo and teh sphixn.
+</div>
+```
+```css
+.container { position: relative; color: transparent; }
+.container > * { position: absolute; }
+.spelling-error > span { background: ...; color: ...; }
+.selection > span { background: ...; text-shadow: ...; }
+```
+
+Simplify this pattern at your own peril! For example, if you set backgrounds
+directly on layers as your highlight backgrounds, they will always be exactly
+`line-height` tall, but even if your `line-height` is 1, the actual line boxes
+and so on can still be taller (unless they contain Ahem text only).
+
+
+## Selection regression tests
+
+Four tests are based on the properties described in <https://crrev.com/915543>,
+and were designed to catch regressions as bugs were fixed in Chromium:
+
+*   selection-originating-underline-order.html (P1)
+*   selection-originating-decoration-color.html (P3)
+*   selection-originating-strikethrough-order.html (P4)
+*   selection-background-painting-order.html (P5)
+
+Ideally we would want a test for property P2, that line-through decorations are
+always painted over text when selecting some of that text. But unfortunately,
+originating decoration recoloring (when correctly implemented) essentially makes
+it impossible to tell whether the text or the decoration was painted on top.
+
+Some ways this test could become possible:
+
+*   Wider impl support for ::target-text or ::highlight decorations.
+    Decorations introduced by highlight pseudos aren’t recolored, so
+    we could move the originating text-decoration to any highlight
+    that paints under ::selection (currently all of them), choose
+    another ::selection color, and check which is painted on top.
+
+*   SVG adds support for text-decoration-color, or HTML adds support
+    for stroke and stroke-width via CSS, as long as we continue to
+    recolor originating decorations to color only. Then we could
+    stroke in another color, and check which is painted on top.
+
+*   css-pseudo adds some kind of support for suppressing or otherwise
+    tweaking the recoloring of originating decorations.
+
+*   Some other standard means for text to contain colors other than
+    the color property, such as color fonts.