test: stabilize crud lumo visual tests by disabling backdrop animation#11587
Merged
web-padawan merged 1 commit intomainfrom Apr 28, 2026
Merged
test: stabilize crud lumo visual tests by disabling backdrop animation#11587web-padawan merged 1 commit intomainfrom
web-padawan merged 1 commit intomainfrom
Conversation
The Lumo overlay backdrop has a 0.2s fade-in animation that the existing not-animated-styles.js did not neutralize. Playwright's screenshot() defaults to animations: 'allow', so the captured frame landed at varying points along the ramp depending on machine load, producing flaky baselines for any test with an open editor dialog. Add [part='backdrop'] to the animation: none selector list and regenerate the affected baselines.
|
vursen
approved these changes
Apr 28, 2026
3 tasks
web-padawan
added a commit
that referenced
this pull request
Apr 28, 2026
…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).
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
0.2s lumo-overlay-backdrop-enterfade-in animation thatpackages/crud/test/not-animated-styles.jsdid not neutralize. Playwright'sLocator.screenshot()defaults toanimations: 'allow', so the captured frame landed at a varying point along that 0.2 s ramp depending on machine load, producing flaky baselines for any crud test that captures an open editor dialog (default-position, fullscreen, andtheme-no-border-edit).[part='backdrop']to the existinganimation: none !importantselector list. The backdrop now sits at its CSS-default opacity from frame 0, so timing no longer matters.Test plan
yarn update:lumo --group crudruns (in the official Playwright Docker image) produce byte-identical PNGs (md5 confirmed).yarn test --config web-test-runner-lumo.config.js --group crudpasses 23/23 against the new baselines.🤖 Generated with Claude Code