Add MathML namespace support for interactive rendering

[javiercn]

Summary

Fixes #60064

MathML elements (<math>, <mrow>, <mi>, etc.) were not rendering correctly when added with interactive content in Blazor. The issue was that these elements were being created using document.createElement() instead of document.createElementNS() with the MathML namespace (http://www.w3.org/1998/Math/MathML).

This is similar to how SVG elements are handled in the renderer.

Changes

Core Fix

• LogicalElements.ts: Added isMathMLElement() helper function to detect if an element is inside a MathML context
• BrowserRenderer.ts:
  • Added sharedMathMLElemForParsing for parsing MathML markup content
  • Updated insertElement() to create MathML elements with the correct namespace using createElementNS('http://www.w3.org/1998/Math/MathML', tagName)
  • Updated parseMarkup() to handle MathML content

Tests

• Added MathMLComponent.razor - Test component with various MathML scenarios
• Added MathMLRowComponent.razor - Child component for testing nested MathML
• Added MathMLTest.cs - E2E tests covering:
  • Interactive MathML with correct namespace
  • Static MathML with correct namespace
  • Child components inside MathML
  • Conditionally rendered MathML
  • Complex MathML (quadratic formula)

Testing

All 5 new E2E tests pass:

• CanRenderMathMLWithCorrectNamespace
• CanRenderStaticMathMLWithCorrectNamespace
• CanRenderMathMLChildComponentWithCorrectNamespace
• CanRenderConditionalMathMLWithCorrectNamespace
• CanRenderComplexMathMLWithCorrectNamespace

[Copilot]

Pull request overview

This PR adds support for rendering MathML elements with the correct namespace in Blazor's interactive renderer. Previously, MathML elements were created using document.createElement() which resulted in incorrect rendering. The fix mirrors the existing SVG namespace handling by using document.createElementNS() with the MathML namespace URI.

Key changes:

• Added isMathMLElement() helper function to detect MathML context
• Updated element creation and markup parsing to handle MathML namespace
• Added comprehensive E2E tests covering interactive, static, nested, conditional, and complex MathML scenarios

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/Components/Web.JS/src/Rendering/LogicalElements.ts	Added isMathMLElement() helper function to detect if an element is in MathML context
src/Components/Web.JS/src/Rendering/BrowserRenderer.ts	Updated insertElement() and parseMarkup() to create MathML elements with correct namespace, added shared MathML parsing element
src/Components/test/testassets/BasicTestApp/MathMLComponent.razor	Test component with 5 MathML scenarios: interactive, static, child component, conditional, and complex formula
src/Components/test/testassets/BasicTestApp/MathMLRowComponent.razor	Child component for testing nested MathML rendering
src/Components/test/testassets/BasicTestApp/Index.razor	Added MathMLComponent to the test component selector dropdown
src/Components/test/E2ETest/Tests/MathMLTest.cs	E2E test suite with 5 tests verifying correct MathML namespace handling across various scenarios

[ilonatommy]

Look good, even though it's a bunch of new e2e tests for this narrow use case.

[javiercn]

Look good, even though it's a bunch of new e2e tests for this narrow use case.

That's fair. We can choose to trim down the set in the future.