Engine: Exclude SVG and MathML contexts from DebugVisitor (#1084)

This pull request adds `svg` and `math` to the excluded tags list so ERB
outputs inside these elements are not wrapped in spans.

The DebugVisitor wraps ERB outputs in `<span>` elements for debugging in
ReActionView. However, `<span>` is not valid inside SVG or MathML,
causing browsers to discard the wrappers and break rendering.

Resolves #1052

Author: marcoroth

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) }

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