test: stabilize rich-text-editor visual tests by disabling toolbar-button transitions (#11600) (CP: 25.1)

[vaadin-bot]

This PR cherry-picks changes from the original PR #11600 to branch 25.1.

---

Original PR description

Summary

Both Aura and Lumo define transitions on the rich-text-editor's toolbar-button parts:

• packages/aura/src/components/rich-text-editor.css:42-46 — color 80ms, background-color 80ms, scale 180ms, with a :active override at :62-64
• packages/vaadin-lumo-styles/src/components/rich-text-editor.css:54 — same color/background-color ramp

Several visual tests trigger these mid-ramp:

• toolbar-button-hover — sendMouseToElement fires the color/bg ramp
• toolbar-button-pressed — sendMouse({ type: 'down' }) engages :active and the scale ramp
• focus — focusing the editor flips toolbar-button-pressed's --vaadin-rich-text-editor-toolbar-button-{background,text-color} via :focus-within, which the existing transition then animates
• background-popup / color-popup (Lumo) — opening the colour pickers shifts the active-picker button colours

Capturing immediately after each trigger lands the screenshot somewhere on the 80-180 ms ramp; different Playwright versions land at different points, producing baseline drift on every bump.

Changes

Extend packages/rich-text-editor/test/visual/common.js with [part~='toolbar-button'] { transition: none !important }.

The selector uses ~= because buttons carry multi-token part lists (e.g. part="toolbar-button toolbar-button-bold"); the exact-match [part='toolbar-button'] would silently miss them. !important is required because Aura is adopted into adoptedStyleSheets after registerStyles, and both rules sit at specificity 0,1,0.

Baseline impact

8 baselines shift to their fully-applied end state:

• 6 Aura — 3 default + 3 dark (focus.png, toolbar-button-hover.png, toolbar-button-pressed.png)
• 2 Lumo — background-popup.png, color-popup.png

All diffs are sub-pixel: max delta ≤ 3, zero high-delta pixels. Base baselines are byte-identical to main.

Test plan

• Two consecutive 4-config sweeps in Docker (yarn update:aura --group rte && update:aura:dark --group rte && update:lumo --group rte && update:base --group rte) produce byte-identical baselines.
• yarn test:aura --group rte (and the dark + lumo + base counterparts) pass against the new baselines.
• CI visual-tests workflow stays green.

Same cascade-order pattern as #11587/#11588/#11591/#11595/#11598/#11599.

🤖 Generated with Claude Code

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud