Merge remote-tracking branch 'origin/main' into fix/node-text-bleed-through-stacking

# Conflicts: # src/renderer/extensions/vueNodes/components/LGraphNode.vue
test: add visual regression test for node text bleed-through
2026-03-20 20:37:33 +00:00 · 2026-03-18 09:21:58 +09:00 · 2026-03-18 09:17:50 +09:00 · 2026-03-17 14:14:29 +09:00 · 2026-03-17 12:56:40 +09:00 · 2026-03-16 07:56:04 +00:00
2 changed files with 162 additions and 0 deletions
--- a/browser_tests/assets/vueNodes/overlapping-with-text.json
+++ b/browser_tests/assets/vueNodes/overlapping-with-text.json
@@ -0,0 +1,139 @@
+{
+  "id": "b7e1a3f0-text-bleed-test",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CLIPTextEncode",
+      "pos": [500, 300],
+      "size": [240, 155],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "localized_name": "clip",
+          "name": "clip",
+          "type": "CLIP",
+          "link": null
+        },
+        {
+          "localized_name": "text",
+          "name": "text",
+          "type": "STRING",
+          "widget": { "name": "text" },
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "localized_name": "CONDITIONING",
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": null
+        }
+      ],
+      "properties": { "Node name for S&R": "CLIPTextEncode" },
+      "widgets_values": ["beautiful scenery nature glass bottle landscape"]
+    },
+    {
+      "id": 2,
+      "type": "KSampler",
+      "pos": [500, 300],
+      "size": [428, 437],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "localized_name": "model",
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "localized_name": "positive",
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "localized_name": "negative",
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "localized_name": "latent_image",
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "localized_name": "seed",
+          "name": "seed",
+          "type": "INT",
+          "widget": { "name": "seed" },
+          "link": null
+        },
+        {
+          "localized_name": "steps",
+          "name": "steps",
+          "type": "INT",
+          "widget": { "name": "steps" },
+          "link": null
+        },
+        {
+          "localized_name": "cfg",
+          "name": "cfg",
+          "type": "FLOAT",
+          "widget": { "name": "cfg" },
+          "link": null
+        },
+        {
+          "localized_name": "sampler_name",
+          "name": "sampler_name",
+          "type": "COMBO",
+          "widget": { "name": "sampler_name" },
+          "link": null
+        },
+        {
+          "localized_name": "scheduler",
+          "name": "scheduler",
+          "type": "COMBO",
+          "widget": { "name": "scheduler" },
+          "link": null
+        },
+        {
+          "localized_name": "denoise",
+          "name": "denoise",
+          "type": "FLOAT",
+          "widget": { "name": "denoise" },
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "localized_name": "LATENT",
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": { "Node name for S&R": "KSampler" },
+      "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [-200, -100]
+    }
+  },
+  "version": 0.4
+}
--- a/browser_tests/tests/vueNodes/interactions/node/textBleedThrough.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/textBleedThrough.spec.ts
@@ -0,0 +1,23 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import { fitToViewInstant } from '../../../../helpers/fitToView'
+
+test.describe('Vue Node Text Bleed-Through', { tag: '@screenshot' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('vueNodes/overlapping-with-text')
+    await comfyPage.vueNodes.waitForNodes()
+    await fitToViewInstant(comfyPage)
+  })
+
+  test('overlapping node should not show text from node beneath', async ({
+    comfyPage
+  }) => {
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'node-text-no-bleed-through.png'
+    )
+  })
+})
Author	SHA1	Message	Date
dante01yoon	85417836dc	Merge remote-tracking branch 'origin/main' into fix/node-text-bleed-through-stacking # Conflicts: # src/renderer/extensions/vueNodes/components/LGraphNode.vue	2026-03-18 09:21:58 +09:00
dante01yoon	b8a988c235	test: add visual regression test for node text bleed-through Add a dedicated workflow fixture with overlapping nodes (CLIP Text Encode with text beneath KSampler) and a screenshot test that catches text bleeding through from lower z-index nodes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-18 09:17:50 +09:00
dante01yoon	92cf138712	test: remove change detector test for CSS class names The stacking context test only asserted Tailwind utility class names, which is a change detector test that doesn't verify behavior. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-17 14:14:29 +09:00
dante01yoon	de08700fa0	fix: keep contain-layout on outer container to preserve node borders Moving contain-layout contain-style from the outer container to the inner wrapper caused Chromium to treat the inner wrapper as a new stacking context, painting it over the Root Border Overlay and hiding node borders. Keep containment on the outer container alongside isolation: isolate. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-17 12:56:40 +09:00
github-actions	461c71670b	[automated] Update test expectations	2026-03-16 07:56:04 +00:00
dante01yoon	c47f89ed28	fix: resolve node text bleed-through by isolating stacking contexts Move `contain-layout contain-style` from the outer node container to the inner wrapper and add `isolation: isolate` to the outer container. The CSS containment on the outer container was interfering with the browser's compositing of overlapping stacking contexts, causing text from lower z-index nodes to visually bleed through higher z-index nodes. - Fixes #9988 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-16 16:04:52 +09:00
dante01yoon	feb8555013	test: add failing test for node text bleed-through stacking issue Adds a test verifying that CSS containment (`contain-layout contain-style`) is applied to the inner wrapper rather than the outer node container, and that the outer container uses `isolation: isolate`. Currently fails because containment is on the outer container and isolation is missing — this causes text from lower z-index nodes to bleed through higher z-index nodes (#9988). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-16 16:03:55 +09:00