Wavy decoration should continue across element boundaries
Problem
A text-decoration: wavy underline restarts its wave phase at every inline
fragment boundary. Nesting an element like <em> or <strong>
inside a decorated element visibly breaks the wave into segments, instead of drawing one
continuous wave across the whole decorated text.
Blink paints text decorations per text fragment and anchored the wavy tile pattern at each fragment's own origin. Unless the fragment width happens to be a multiple of the wavelength, the phase jumps at the boundary.
Cases
The Rendered tab is your browser rendering the case live: on an unpatched Chrome the wave breaks at each nested element; on a patched build it matches Expected. The Expected tab is a capture from a patched build; Diff highlights the changed pixels (magenta) against the unpatched rendering.
Case 1: link with nested <em> (original repro)
Case 2: mixed <strong>/<em> run
Case 3: multiple text nodes via spans
Before / after
Captures from chrome --headless=new at device scale factor 1, 2x nearest-neighbor
crops around the underline.
Case 1
Case 2
Case 3
Cause and fix
DecorationLinePainter::PaintWavyTextDecoration() paints the wave as a repeating
tile translated to the fragment's own paint origin, so every fragment starts at phase zero.
The CSS decorating box
infrastructure (issue 1008951) already
propagates the box that owns the decoration to each fragment; it was used for the vertical
offset and thickness, but not for the pattern phase.
The fix computes each fragment's inline offset from the start of its decorating box
(TextDecorationInfo::InlineOffsetFromDecoratingBox()) and shifts the wavy tile
pattern by that amount modulo the wavelength, anchoring the wave at the decorating box instead
of the fragment. Fragments of the same decorated run therefore share one continuous wave.
Behind the default-on WavyDecorationContinuousPhase runtime feature;
--disable-features=WavyDecorationContinuousPhase restores the old per-fragment
phase as a kill switch.
<div style="text-decoration: wavy red underline;">THIS<strong>is</strong>A<em>test</em>.</div>Tests
Unit test: InlinePaintContextTest.WavyDecorationPhaseContinuesAcrossFragments
(third_party/blink/renderer/core/paint/inline_paint_context_test.cc).
WPT reftest: css/css-text-decor/text-decoration-wavy-phase-across-elements-001.html
(fails on unpatched builds, passes with the fix).