From 270f05d40901d9d469d7b17bf5880b4fb43f17d8 Mon Sep 17 00:00:00 2001
From: darshanr0107 <darshan@mermaidchart.com>
Date: Thu, 18 Sep 2025 15:01:40 +0530
Subject: [PATCH] chore: add visual tests for html labels rendering

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
---
 .../rendering/flowchart-v2.spec.js            | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 5ef32c269..9ce39b3e6 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1199,4 +1199,58 @@ class link myClass
 `
     );
   });
+
+  describe('htmlLabels rendering', () => {
+    it('should not render with htmlLabels when disabled via flowchart config', () => {
+      imgSnapshotTest(
+        `flowchart LR
+          A["HTML label <br> with breaks"] --> B["Another label"]
+          C --> D
+        `,
+        { flowchart: { htmlLabels: false } }
+      );
+    });
+
+    it('should not render with htmlLabels when disabled via global config', () => {
+      imgSnapshotTest(
+        `flowchart LR
+          A["HTML label <br> with breaks"] --> B["Another label"]
+          C --> D
+        `,
+        { htmlLabels: false }
+      );
+    });
+
+    it('should render with htmlLabels when enabled', () => {
+      imgSnapshotTest(
+        `flowchart LR
+          A["HTML label <br> with breaks"] --> B["Another label"]
+          C --> D
+        `,
+        { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+      );
+    });
+
+    it('should not create foreignObject elements when htmlLabels disabled via global config', () => {
+      renderGraph(
+        `flowchart TD
+          A["Node with <br> HTML"] -- "edge <br> label" --> B["Another node"]
+          C --> D
+        `,
+        { htmlLabels: false }
+      );
+      cy.get('svg foreignObject').should('not.exist');
+    });
+
+    it('should create foreignObject elements when htmlLabels enabled', () => {
+      renderGraph(
+        `flowchart TD
+          A["Node with <br> HTML"] -- "edge <br> label" --> B["Another node"]
+          C --> D
+        `,
+        { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+      );
+      cy.get('svg foreignObject').should('exist');
+    });
+  });
 });