From f36a683860139f701b8f9bf633454402f6c7965f Mon Sep 17 00:00:00 2001
From: Marco Roth <marco.roth@intergga.ch>
Date: Sun, 18 Jan 2026 17:05:19 +0100
Subject: [PATCH] Engine: Exclude SVG and MathML contexts from DebugVisitor

---
 lib/herb/engine/debug_visitor.rb              |  2 +-
 test/engine/debug_mode_test.rb                | 73 +++++++++++++++++++
 ...spans_abd11745e9db86296002411c6c32107d.txt | 10 +++
 ...spans_ee142cee09770f1e7abd1bba545ccfbf.txt | 16 ++++
 ...e_svg_899e55a5b972596a5c3ec95a4b0bf2df.txt | 14 ++++
 ...spans_0b05aaac2761684788eb7a05f9a94a64.txt | 13 ++++
 ..._math_609c20a1abc8582ebecf218e494420c6.txt | 15 ++++
 7 files changed, 142 insertions(+), 1 deletion(-)
 create mode 100644 test/snapshots/engine/debug_mode_test/test_0047_svg_content_erb_expressions_do_NOT_get_debug_spans_abd11745e9db86296002411c6c32107d.txt
 create mode 100644 test/snapshots/engine/debug_mode_test/test_0048_svg_with_defs_and_style_erb_expressions_do_NOT_get_debug_spans_ee142cee09770f1e7abd1bba545ccfbf.txt
 create mode 100644 test/snapshots/engine/debug_mode_test/test_0049_nested_svg_inside_div_erb_expressions_do_NOT_get_debug_spans_inside_svg_899e55a5b972596a5c3ec95a4b0bf2df.txt
 create mode 100644 test/snapshots/engine/debug_mode_test/test_0050_math_content_erb_expressions_do_NOT_get_debug_spans_0b05aaac2761684788eb7a05f9a94a64.txt
 create mode 100644 test/snapshots/engine/debug_mode_test/test_0051_nested_math_inside_div_erb_expressions_do_NOT_get_debug_spans_inside_math_609c20a1abc8582ebecf218e494420c6.txt

diff --git a/lib/herb/engine/debug_visitor.rb b/lib/herb/engine/debug_visitor.rb
index 44526311..8226276a 100644
--- a/lib/herb/engine/debug_visitor.rb
+++ b/lib/herb/engine/debug_visitor.rb
@@ -301,7 +301,7 @@ def in_script_or_style_context?
       end
 
       def in_excluded_context?
-        excluded_tags = ["script", "style", "head", "textarea", "pre"]
+        excluded_tags = ["script", "style", "head", "textarea", "pre", "svg", "math"]
         return true if excluded_tags.any? { |tag| @element_stack.include?(tag) }
 
         return true if @erb_block_stack.any? { |node| javascript_tag?(node.content.value.strip) }
diff --git a/test/engine/debug_mode_test.rb b/test/engine/debug_mode_test.rb
index 11d12f16..92ee5957 100644
--- a/test/engine/debug_mode_test.rb
+++ b/test/engine/debug_mode_test.rb
@@ -402,5 +402,78 @@ class DebugModeTest < Minitest::Spec
 
       assert_compiled_snapshot(template, debug: true)
     end
+
+    test "svg content erb expressions do NOT get debug spans" do
+      template = <<~ERB
+        <svg viewBox="0 0 100 100">
+          <circle cx="50" cy="50" r="<%= @radius %>" />
+          <text x="50" y="50"><%= @label %></text>
+        </svg>
+      ERB
+
+      assert_compiled_snapshot(template, debug: true)
+    end
+
+    test "svg with defs and style erb expressions do NOT get debug spans" do
+      template = <<~ERB
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29">
+          <defs>
+            <style>
+              .cls-1 {fill:none;stroke:<%= @stroke_color %>}
+            </style>
+          </defs>
+          <g transform="rotate(<%= @angle %> 50 50)">
+            <line x1="50" y1="10" x2="50" y2="50" stroke="red" />
+          </g>
+        </svg>
+      ERB
+
+      assert_compiled_snapshot(template, debug: true)
+    end
+
+    test "nested svg inside div erb expressions do NOT get debug spans inside svg" do
+      template = <<~ERB
+        <div class="chart-container">
+          <h2><%= @chart_title %></h2>
+          <svg viewBox="0 0 100 100">
+            <rect width="<%= @width %>" height="<%= @height %>" />
+            <text><%= @value %></text>
+          </svg>
+          <p><%= @description %></p>
+        </div>
+      ERB
+
+      assert_compiled_snapshot(template, debug: true, filename: "test.html.erb")
+    end
+
+    test "math content erb expressions do NOT get debug spans" do
+      template = <<~ERB
+        <math>
+          <mrow>
+            <mi><%= @variable %></mi>
+            <mo>=</mo>
+            <mn><%= @value %></mn>
+          </mrow>
+        </math>
+      ERB
+
+      assert_compiled_snapshot(template, debug: true)
+    end
+
+    test "nested math inside div erb expressions do NOT get debug spans inside math" do
+      template = <<~ERB
+        <div class="equation">
+          <p><%= @equation_name %></p>
+          <math>
+            <msup>
+              <mi><%= @base %></mi>
+              <mn><%= @exponent %></mn>
+            </msup>
+          </math>
+        </div>
+      ERB
+
+      assert_compiled_snapshot(template, debug: true, filename: "test.html.erb")
+    end
   end
 end
diff --git a/test/snapshots/engine/debug_mode_test/test_0047_svg_content_erb_expressions_do_NOT_get_debug_spans_abd11745e9db86296002411c6c32107d.txt b/test/snapshots/engine/debug_mode_test/test_0047_svg_content_erb_expressions_do_NOT_get_debug_spans_abd11745e9db86296002411c6c32107d.txt
new file mode 100644
index 00000000..144851a7
--- /dev/null
+++ b/test/snapshots/engine/debug_mode_test/test_0047_svg_content_erb_expressions_do_NOT_get_debug_spans_abd11745e9db86296002411c6c32107d.txt
@@ -0,0 +1,10 @@
+---
+source: "Engine::DebugModeTest#test_0047_svg content erb expressions do NOT get debug spans"
+input: "{source: \"<svg viewBox=\\\"0 0 100 100\\\">\\n  <circle cx=\\\"50\\\" cy=\\\"50\\\" r=\\\"<%= @radius %>\\\" />\\n  <text x=\\\"50\\\" y=\\\"50\\\"><%= @label %></text>\\n</svg>\\n\", options: {debug: true}}"
+---
+_buf = ::String.new; _buf << '<svg viewBox="0 0 100 100" data-herb-debug-outline-type="view" data-herb-debug-file-name="unknown" data-herb-debug-file-relative-path="unknown" data-herb-debug-file-full-path="unknown">
+  <circle cx="50" cy="50" r="'.freeze; _buf << ::Herb::Engine.attr((@radius)); _buf << '" />
+  <text x="50" y="50">'.freeze; _buf << (@label).to_s; _buf << '</text>
+</svg>
+'.freeze;
+_buf.to_s
diff --git a/test/snapshots/engine/debug_mode_test/test_0048_svg_with_defs_and_style_erb_expressions_do_NOT_get_debug_spans_ee142cee09770f1e7abd1bba545ccfbf.txt b/test/snapshots/engine/debug_mode_test/test_0048_svg_with_defs_and_style_erb_expressions_do_NOT_get_debug_spans_ee142cee09770f1e7abd1bba545ccfbf.txt
new file mode 100644
index 00000000..59492746
--- /dev/null
+++ b/test/snapshots/engine/debug_mode_test/test_0048_svg_with_defs_and_style_erb_expressions_do_NOT_get_debug_spans_ee142cee09770f1e7abd1bba545ccfbf.txt
@@ -0,0 +1,16 @@
+---
+source: "Engine::DebugModeTest#test_0048_svg with defs and style erb expressions do NOT get debug spans"
+input: "{source: \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 29 29\\\">\\n  <defs>\\n    <style>\\n      .cls-1 {fill:none;stroke:<%= @stroke_color %>}\\n    </style>\\n  </defs>\\n  <g transform=\\\"rotate(<%= @angle %> 50 50)\\\">\\n    <line x1=\\\"50\\\" y1=\\\"10\\\" x2=\\\"50\\\" y2=\\\"50\\\" stroke=\\\"red\\\" />\\n  </g>\\n</svg>\\n\", options: {debug: true}}"
+---
+_buf = ::String.new; _buf << '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" data-herb-debug-outline-type="view" data-herb-debug-file-name="unknown" data-herb-debug-file-relative-path="unknown" data-herb-debug-file-full-path="unknown">
+  <defs>
+    <style>
+      .cls-1 {fill:none;stroke:'.freeze; _buf << ::Herb::Engine.css((@stroke_color)); _buf << '}
+    </style>
+  </defs>
+  <g transform="rotate('.freeze; _buf << ::Herb::Engine.attr((@angle)); _buf << ' 50 50)">
+    <line x1="50" y1="10" x2="50" y2="50" stroke="red" />
+  </g>
+</svg>
+'.freeze;
+_buf.to_s
diff --git a/test/snapshots/engine/debug_mode_test/test_0049_nested_svg_inside_div_erb_expressions_do_NOT_get_debug_spans_inside_svg_899e55a5b972596a5c3ec95a4b0bf2df.txt b/test/snapshots/engine/debug_mode_test/test_0049_nested_svg_inside_div_erb_expressions_do_NOT_get_debug_spans_inside_svg_899e55a5b972596a5c3ec95a4b0bf2df.txt
new file mode 100644
index 00000000..9e43fe0e
--- /dev/null
+++ b/test/snapshots/engine/debug_mode_test/test_0049_nested_svg_inside_div_erb_expressions_do_NOT_get_debug_spans_inside_svg_899e55a5b972596a5c3ec95a4b0bf2df.txt
@@ -0,0 +1,14 @@
+---
+source: "Engine::DebugModeTest#test_0049_nested svg inside div erb expressions do NOT get debug spans inside svg"
+input: "{source: \"<div class=\\\"chart-container\\\">\\n  <h2><%= @chart_title %></h2>\\n  <svg viewBox=\\\"0 0 100 100\\\">\\n    <rect width=\\\"<%= @width %>\\\" height=\\\"<%= @height %>\\\" />\\n    <text><%= @value %></text>\\n  </svg>\\n  <p><%= @description %></p>\\n</div>\\n\", options: {debug: true, filename: \"test.html.erb\"}}"
+---
+_buf = ::String.new; _buf << '<div class="chart-container" data-herb-debug-outline-type="view" data-herb-debug-file-name="test.html.erb" data-herb-debug-file-relative-path="test.html.erb" data-herb-debug-file-full-path="test.html.erb">
+  <h2><span data-herb-debug-outline-type="erb-output" data-herb-debug-erb="&lt;%= @chart_title %&gt;" data-herb-debug-file-name="test.html.erb" data-herb-debug-file-relative-path="test.html.erb" data-herb-debug-file-full-path="test.html.erb" data-herb-debug-inserted="true" data-herb-debug-line="2" data-herb-debug-column="7" style="display: contents;">'.freeze; _buf << (@chart_title).to_s; _buf << '</span></h2>
+  <svg viewBox="0 0 100 100">
+    <rect width="'.freeze; _buf << ::Herb::Engine.attr((@width)); _buf << '" height="'.freeze; _buf << ::Herb::Engine.attr((@height)); _buf << '" />
+    <text>'.freeze; _buf << (@value).to_s; _buf << '</text>
+  </svg>
+  <p><span data-herb-debug-outline-type="erb-output" data-herb-debug-erb="&lt;%= @description %&gt;" data-herb-debug-file-name="test.html.erb" data-herb-debug-file-relative-path="test.html.erb" data-herb-debug-file-full-path="test.html.erb" data-herb-debug-inserted="true" data-herb-debug-line="7" data-herb-debug-column="6" style="display: contents;">'.freeze; _buf << (@description).to_s; _buf << '</span></p>
+</div>
+'.freeze;
+_buf.to_s
diff --git a/test/snapshots/engine/debug_mode_test/test_0050_math_content_erb_expressions_do_NOT_get_debug_spans_0b05aaac2761684788eb7a05f9a94a64.txt b/test/snapshots/engine/debug_mode_test/test_0050_math_content_erb_expressions_do_NOT_get_debug_spans_0b05aaac2761684788eb7a05f9a94a64.txt
new file mode 100644
index 00000000..e4190355
--- /dev/null
+++ b/test/snapshots/engine/debug_mode_test/test_0050_math_content_erb_expressions_do_NOT_get_debug_spans_0b05aaac2761684788eb7a05f9a94a64.txt
@@ -0,0 +1,13 @@
+---
+source: "Engine::DebugModeTest#test_0050_math content erb expressions do NOT get debug spans"
+input: "{source: \"<math>\\n  <mrow>\\n    <mi><%= @variable %></mi>\\n    <mo>=</mo>\\n    <mn><%= @value %></mn>\\n  </mrow>\\n</math>\\n\", options: {debug: true}}"
+---
+_buf = ::String.new; _buf << '<math data-herb-debug-outline-type="view" data-herb-debug-file-name="unknown" data-herb-debug-file-relative-path="unknown" data-herb-debug-file-full-path="unknown">
+  <mrow>
+    <mi>'.freeze; _buf << (@variable).to_s; _buf << '</mi>
+    <mo>=</mo>
+    <mn>'.freeze; _buf << (@value).to_s; _buf << '</mn>
+  </mrow>
+</math>
+'.freeze;
+_buf.to_s
diff --git a/test/snapshots/engine/debug_mode_test/test_0051_nested_math_inside_div_erb_expressions_do_NOT_get_debug_spans_inside_math_609c20a1abc8582ebecf218e494420c6.txt b/test/snapshots/engine/debug_mode_test/test_0051_nested_math_inside_div_erb_expressions_do_NOT_get_debug_spans_inside_math_609c20a1abc8582ebecf218e494420c6.txt
new file mode 100644
index 00000000..c42f1f81
--- /dev/null
+++ b/test/snapshots/engine/debug_mode_test/test_0051_nested_math_inside_div_erb_expressions_do_NOT_get_debug_spans_inside_math_609c20a1abc8582ebecf218e494420c6.txt
@@ -0,0 +1,15 @@
+---
+source: "Engine::DebugModeTest#test_0051_nested math inside div erb expressions do NOT get debug spans inside math"
+input: "{source: \"<div class=\\\"equation\\\">\\n  <p><%= @equation_name %></p>\\n  <math>\\n    <msup>\\n      <mi><%= @base %></mi>\\n      <mn><%= @exponent %></mn>\\n    </msup>\\n  </math>\\n</div>\\n\", options: {debug: true, filename: \"test.html.erb\"}}"
+---
+_buf = ::String.new; _buf << '<div class="equation" data-herb-debug-outline-type="view" data-herb-debug-file-name="test.html.erb" data-herb-debug-file-relative-path="test.html.erb" data-herb-debug-file-full-path="test.html.erb">
+  <p><span data-herb-debug-outline-type="erb-output" data-herb-debug-erb="&lt;%= @equation_name %&gt;" data-herb-debug-file-name="test.html.erb" data-herb-debug-file-relative-path="test.html.erb" data-herb-debug-file-full-path="test.html.erb" data-herb-debug-inserted="true" data-herb-debug-line="2" data-herb-debug-column="6" style="display: contents;">'.freeze; _buf << (@equation_name).to_s; _buf << '</span></p>
+  <math>
+    <msup>
+      <mi>'.freeze; _buf << (@base).to_s; _buf << '</mi>
+      <mn>'.freeze; _buf << (@exponent).to_s; _buf << '</mn>
+    </msup>
+  </math>
+</div>
+'.freeze;
+_buf.to_s