fix: deterministic DOM widget clip-path for flaky screenshot test (#9400)

Browse Source

## Summary

Fix deterministic DOM widget clip-path rendering to resolve the flaky
"Can drag node" screenshot test.

## Root Cause

`useDomClipping.updateClipPath()` schedules clip-path calculation in a
`requestAnimationFrame`, but `DomWidget.vue`'s watcher reads
`clippingStyle.value` synchronously before the RAF fires. The stale
clip-path gets baked into `style.value` and never updated when the RAF
completes, causing the textarea DOM widget to non-deterministically
render in front of or behind the canvas-drawn node selection border.

## Fix

- Extract `composeStyle()` function and add a dedicated watcher on
`clippingStyle` that recomposes the final inline style whenever the
RAF-deferred clip-path updates
- Add `enableDomClipping` to the main watcher dependency array so
toggling the clipping setting immediately recomposes the style
- Add `moveMouseToEmptyArea()` call in the test as a secondary
stabilizer against hover highlight non-determinism
- Delete stale snapshot so CI regenerates it with correct clip-path
behavior

- Fixes #4658

---------

Co-authored-by: github-actions <github-actions@github.com>

...

This commit is contained in:

Christian Byrne

2026-03-04 21:44:20 -08:00

committed by GitHub

parent f00a65ced0

commit 6c20d64fa9

5 changed files with 27 additions and 15 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

BIN

browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-no-connection-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 93 KiB After Width:  |  Height:  |  Size: 98 KiB