Aura defines two transitions on the shared
:is(vaadin-button, vaadin-upload-button, …) selector in
packages/aura/src/components/button.css:7,86-88:
- scale 180ms on press ([active])
- opacity 100ms, background-color 100ms on the ::before hover overlay
The button visual tests' hover and active scenarios trigger these via
sendMouseToElement / mousedown and capture immediately after, so the
screenshot lands somewhere on the 100-180ms ramp. Different Playwright
versions land at different points along that ramp, producing baseline
drift on every bump.
Add packages/button/test/visual/not-animated-styles.js with
transition: none !important on vaadin-button :host, :host::before,
:host::after, and import it from the button visual tests for all
3 themes. Six Aura *-hover.png baselines (3 default + 3 dark) shift
to the fully-opaque hover overlay end state (sub-LSB diff,
max delta=1); active and default baselines, and all Lumo and base
baselines, stay byte-identical.
Same pattern as #11598 (upload-button), #11595 (tabs scroll buttons),
and the cascade-order fix from #11587/#11588/#11591.
web-padawan
changed the title
Summary
Aura defines two transitions on the shared
:is(vaadin-button, vaadin-upload-button, …)selector atpackages/aura/src/components/button.css:7,86-88:scale 180mson press ([active])opacity 100ms, background-color 100mson the::beforehover overlayThe button visual tests'
hoverandactivescenarios trigger these viasendMouseToElement/mousedownand capture immediately after, so the screenshot lands somewhere on the 100–180 ms ramp. Different Playwright versions land at different points along that ramp, producing baseline drift on every bump.Same pattern as #11598 (upload-button), #11595 (tabs scroll buttons), and the cascade-order fix from #11587/#11588/#11591.
Changes
packages/button/test/visual/not-animated-styles.jsregisteringtransition: none !importantonvaadin-button:host, :host::before, :host::after.buttonvisual tests for all 3 themes (aura,lumo,base).!importantis required because Aura is adopted intoadoptedStyleSheetsafterregisterStyles, and both rules sit at specificity 0,1,0.Baseline impact
Six Aura
*-hover.pngbutton baselines shifted to the fully-opaque hover overlay end state — three underaura/screenshots/default/button/and three underaura/screenshots/dark/button/. Diff is sub-LSB (MAX_DELTA = 1, button center byte-identical). Theactive,default,focus-ring,disabled, icon, accent, and variant baselines stay byte-identical, as do all Lumo and base baselines.Test plan
yarn update:aura --group buttonandyarn update:aura:dark --group buttonruns in Docker produce byte-identical baselines (md5 confirmed for all 6 affected files).yarn test:aura --group button(52/52),yarn test:aura:dark --group button(implicit),yarn test:lumo --group button,yarn test:base --group button(18/18) — all pass against the new baselines.🤖 Generated with Claude Code