04873fa2dc
Automatic update from web-platform-tests De-flake input-element-pseudo-open test_driver.bless() calls were timing out while the picker is open, and the color picker wasn't closing when calling input.blur(). Replacing both of these with test_driver.click() on a button that always comes before the pickers fixes both of these issues. Change-Id: I01550d84c5e6111329cc660f6e797ce21f4e2b74 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6149610 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: Steinar H Gunderson <sesse@chromium.org> Reviewed-by: Di Zhang <dizhangg@chromium.org> Cr-Commit-Position: refs/heads/main@{#1402549} -- wpt-commits: cdaff805df545b270353cbe68c775af2f1665ce2 wpt-pr: 49925
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:
<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>
.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.