fix: deterministic DOM widget clip-path for flaky screenshot test

browser_tests/tests/interaction.spec.ts

@@ -171,6 +171,8 @@ test.describe('Node Interaction', () => {
 
   test('Can drag node', { tag: '@screenshot' }, async ({ comfyPage }) => {
     await comfyPage.nodeOps.dragTextEncodeNode2()
+    // Move mouse away to avoid hover highlight on the node at the drop position.
+    await comfyPage.canvasOps.moveMouseToEmptyArea()
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png')
   })

src/components/graph/widgets/DomWidget.vue

@@ -102,30 +102,40 @@ const updateDomClipping = () => {
  * and update the position of the widget accordingly.
  */
 const { left, top } = useElementBounding(canvasStore.getCanvas().canvas)
+
+function composeStyle() {
+  const override = widgetState.positionOverride
+  const isDisabled = override
+    ? (override.widget.computedDisabled ?? widget.computedDisabled)
+    : widget.computedDisabled
+
+  style.value = {
+    ...positionStyle.value,
+    ...(enableDomClipping.value ? clippingStyle.value : {}),
+    zIndex: widgetState.zIndex,
+    pointerEvents: widgetState.readonly || isDisabled ? 'none' : 'auto',
+    opacity: isDisabled ? 0.5 : 1
+  }
+}
+
 watch(
-  [() => widgetState, left, top],
-  ([widgetState, _, __]) => {
+  [() => widgetState, left, top, enableDomClipping],
+  ([widgetState]) => {
     updatePosition(widgetState)
     if (enableDomClipping.value) {
       updateDomClipping()
     }
-
-    const override = widgetState.positionOverride
-    const isDisabled = override
-      ? (override.widget.computedDisabled ?? widget.computedDisabled)
-      : widget.computedDisabled
-
-    style.value = {
-      ...positionStyle.value,
-      ...(enableDomClipping.value ? clippingStyle.value : {}),
-      zIndex: widgetState.zIndex,
-      pointerEvents: widgetState.readonly || isDisabled ? 'none' : 'auto',
-      opacity: isDisabled ? 0.5 : 1
-    }
+    composeStyle()
   },
   { deep: true }
 )
 
+// Recompose style when clippingStyle updates asynchronously via RAF.
+// updateClipPath() schedules clip-path calculation in a requestAnimationFrame,
+// so clippingStyle.value updates after the main watcher has already composed
+// style. This watcher ensures the new clip-path is applied to the DOM.
+watch(clippingStyle, composeStyle, { deep: true })
+
 watch(
   () => widgetState.visible,
   (newVisible, oldVisible) => {