test: stabilize Lumo visual tests by disabling backdrop animation#11591
Merged
web-padawan merged 1 commit intomainfrom Apr 28, 2026
Merged
test: stabilize Lumo visual tests by disabling backdrop animation#11591web-padawan merged 1 commit intomainfrom
web-padawan merged 1 commit intomainfrom
Conversation
…isabling backdrop animation The Lumo overlay backdrop has a 0.2s lumo-overlay-backdrop-enter fade-in that was not neutralised in any of these packages — dialog and confirm-dialog covered :host([opening|closing]) and [part='overlay'] but left [part='backdrop'] animated, while overlay had no test stylesheet at all. Playwright's screenshot() defaults to animations: 'allow', so the captured frame lands at a varying point along the 0.2s ramp depending on machine load, producing flaky baselines for any test with an open overlay backdrop. Add [part='backdrop']: animation: none !important to dialog and confirm-dialog test stylesheets, create the same for overlay, wire it up in overlay.test.js, and regenerate the affected lumo baselines. Same fix already applied to crud (#11587).
vursen
approved these changes
Apr 28, 2026
web-padawan
force-pushed
the
test/dialog-lumo-tests-backdrop
branch
from
e7ba855 to
5cbf52c
Compare
web-padawan
changed the title
|
web-padawan
changed the title
3 tasks
web-padawan
added a commit
that referenced
this pull request
Apr 29, 2026
…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.
Same cascade-order pitfall as #11591 (dialog/confirm-dialog backdrops).
web-padawan
added a commit
that referenced
this pull request
Apr 29, 2026
…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).
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
dialog,confirm-dialog, andoverlay. The Lumo overlay backdrop has a0.2s lumo-overlay-backdrop-enterfade-in (packages/vaadin-lumo-styles/src/mixins/overlay.css:97-99) that none of these packages neutralised —dialogandconfirm-dialogcovered:host([opening|closing])and[part='overlay']but left[part='backdrop']animated, andoverlayhad no test stylesheet at all.Locator.screenshot()defaults toanimations: 'allow', so the captured frame landed at varying points along the 0.2 s ramp. Symptom on a freshyarn update:lumofrom main: the backdrop region ofdialog/basic.pngandconfirm-dialog/basic.pngshifts uniformly between captures (e.g.(229, 232, 236) → (240, 242, 244)) while the central white dialog body stays byte-identical — the textbook signature of a backdrop fade-in mid-ramp.[part='backdrop'] { animation: none !important }todialog/test/not-animated-styles.jsandconfirm-dialog/test/not-animated-styles.js, created the same as a new file inoverlay/test/not-animated-styles.js, and imported it fromoverlay/test/visual/lumo/overlay.test.js. Regenerated the 14 affected lumo baselines (9 dialog, 4 confirm-dialog, 1 overlay).Test plan
yarn update:lumo --group dialog --group confirm-dialog --group overlayruns (Docker) produce byte-identical PNGs (md5 confirmed for all 14 files).🤖 Generated with Claude Code