test: stabilize tabs scroll-button visual tests by disabling opacity transition#11595
Merged
web-padawan merged 2 commits intomainfrom Apr 29, 2026
Merged
test: stabilize tabs scroll-button visual tests by disabling opacity transition#11595web-padawan merged 2 commits intomainfrom
web-padawan merged 2 commits intomainfrom
Conversation
web-padawan
force-pushed
the
test/lumo-tabs-scroll-button
branch
from
b81acdb to
abdb1ff
Compare
…transition
The Lumo tabs scroll arrows have transition: 0.2s opacity defined in
packages/vaadin-lumo-styles/src/components/tabs.css:77 — the opacity
ramps 0 → 1 when the host gets [overflow~='start'] / [overflow~='end'].
The visual tests captured the buttons mid-fade-in, producing flaky
ltr-/rtl-horizontal-{,-centered-}scroll.png baselines.
Add a registerStyles block for vaadin-tabs in
packages/tabs/test/visual/not-animated-styles.js (the file the lumo
visual test actually imports) that sets transition: none !important
on [part='forward-button'], [part='back-button']. !important is
required because Lumo styles are adopted after registerStyles styles
in adoptedStyleSheets and both rules sit at specificity 0,1,0.
Also remove the unused packages/tabs/test/not-animated-styles.js —
it had no importers anywhere in the monorepo (visual tests import
the visual/ variant; tabsheet's tests import @vaadin/tabs/test/
visual/not-animated-styles.js by package name).
Same cascade-order pitfall as #11591 (dialog/confirm-dialog backdrops).
web-padawan
force-pushed
the
test/lumo-tabs-scroll-button
branch
from
abdb1ff to
e27614d
Compare
web-padawan
changed the title
|
vursen
approved these changes
Apr 29, 2026
3 tasks
web-padawan
added a commit
that referenced
this pull request
Apr 29, 2026
…lete-state transitions Aura defines two classes of transitions that race with Playwright's screenshot timing on the upload components: - packages/aura/src/components/button.css:7,86-88 — scale 180ms on press and opacity/background-color 100ms on the ::before hover overlay, applied to vaadin-upload-button via the shared :is(...) selector. The upload-button hover/active scenarios catch these mid-ramp. - packages/aura/src/components/upload.css:92-103 — 200ms max-height on vaadin-upload-file[complete]::part(status) and 200ms height on the slotted vaadin-progress-bar when an upload finishes. Any test that flips a file from non-complete to complete and captures within 200ms can land mid-collapse. Add packages/upload/test/visual/not-animated-styles.js with transition: none !important on: - vaadin-upload-button :host, :host::before, :host::after - vaadin-upload-file [part='status'] - vaadin-progress-bar :host (registered separately because the progress-bar is slotted into upload-file's "progress" slot — a rule scoped to upload-file's shadow cannot reach a light-DOM slotted child, so the override has to live in the progress-bar's own shadow with !important to beat the document-level Aura rule) Wire it into all three themes' upload, upload-button, and upload-file-list-thumbnails visual tests. Three Aura *-hover.png upload-button baselines shifted to the fully-opaque hover overlay end state (sub-LSB diff, max delta=1); all other baselines including Lumo and base are byte-identical to main. The complete-state suppression is defensive — current tests start with [complete] already set so no transition fires today, but it protects against future tests that flip the state programmatically. Same cascade-order pattern as #11587/#11588/#11591/#11595.
web-padawan
added a commit
that referenced
this pull request
Apr 29, 2026
…ransitions 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 upload-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, producing baseline drift on every bump. Add packages/upload/test/visual/not-animated-styles.js with transition: none !important on vaadin-upload-button :host, :host::before, :host::after, and import it from the upload-button visual tests for all 3 themes. Three Aura *-hover.png baselines 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 cascade-order pattern as #11587/#11588/#11591/#11595.
web-padawan
added a commit
that referenced
this pull request
Apr 29, 2026
…ions 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 upload-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, producing baseline drift on every bump. Add packages/upload/test/visual/not-animated-styles.js with transition: none !important on vaadin-upload-button :host, :host::before, :host::after, and import it from the upload-button visual tests for all 3 themes. Three Aura *-hover.png baselines 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 cascade-order pattern as #11587/#11588/#11591/#11595.
This was referenced Apr 29, 2026
This was referenced Apr 29, 2026
This was referenced Apr 29, 2026
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
transition: 0.2s opacityinpackages/vaadin-lumo-styles/src/components/tabs.css:77— opacity ramps 0 → 1 when the host gets[overflow~='start']/[overflow~='end']. Visual tests captured the buttons mid-fade-in, producing flakyltr-/rtl-horizontal-{,-centered-}scroll.pngbaselines (62 px diff with deltas up to 20 inside an 8 × 14 bbox at the scroll-arrow glyph — the canonical opacity-ramp signature).packages/tabs/test/visual/not-animated-styles.js(not the siblingpackages/tabs/test/not-animated-styles.jsused by unit tests). The visual file only registered styles forvaadin-tab, notvaadin-tabs, so the scroll-button transition wasn't being neutralised at all. Added aregisterStyles('vaadin-tabs', …)block there withtransition: none !importanton[part='forward-button'], [part='back-button']. The unit-test variant gets the same!importantfor parity.!importantis required: both Lumo'stransition: 0.2s opacityand the test override sit at specificity 0,1,0; Lumo's stylesheet is adopted afterregisterStylesinadoptedStyleSheets, so on a tie Lumo wins. Same cascade-order pitfall as test: stabilize Lumo visual tests by disabling backdrop animation #11591 (dialog/confirm-dialog backdrops).ltr-/rtl-horizontal-scroll.pngandltr-/rtl-horizontal-centered-scroll.png).Test plan
yarn update:lumo --group tabsruns in Docker produce byte-identical PNGs (md5 confirmed for all 4 affected files).yarn test --config web-test-runner-lumo.config.js --group tabspasses 24/24 against the new baselines.🤖 Generated with Claude Code