Feature: Basic mathml support

glimmerjs · Jan 6, 2025 · 312e110 · 312e110
1 parent c7f8e59
commit 312e110
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/packages/@glimmer-workspace/integration-tests/test/math-test.ts b/packages/@glimmer-workspace/integration-tests/test/math-test.ts
@@ -0,0 +1,22 @@
+import { NS_MATHML } from '@glimmer/constants';
+
+import { defineComponent, jitSuite, RenderTest, test } from '..';
+
+class MathElementTest extends RenderTest {
+  static suiteName = '<math>';
+
+  @test
+  '<math> element can render'() {
+    const Bar = defineComponent({}, '<math><msqrt><mi>x</mi></msqrt></math>');
+
+    this.renderComponent(Bar);
+
+    let el = (s: string) => (this.element as unknown as HTMLElement).querySelector(s);
+
+    this.assert.strictEqual(el('math')?.namespaceURI, NS_MATHML);
+    this.assert.strictEqual(el('msqrt')?.namespaceURI, NS_MATHML);
+    this.assert.strictEqual(el('mi')?.namespaceURI, NS_MATHML);
+  }
+}
+
+jitSuite(MathElementTest);
diff --git a/packages/@glimmer/runtime/lib/dom/operations.ts b/packages/@glimmer/runtime/lib/dom/operations.ts
@@ -1,14 +1,15 @@
 import type {
   Bounds,
   Dict,
+  Namespace,
   Nullable,
   SimpleComment,
   SimpleDocument,
   SimpleElement,
   SimpleNode,
   SimpleText,
 } from '@glimmer/interfaces';
-import { INSERT_BEFORE_BEGIN, INSERT_BEFORE_END, NS_SVG } from '@glimmer/constants';
+import { INSERT_BEFORE_BEGIN, INSERT_BEFORE_END, NS_MATHML, NS_SVG } from '@glimmer/constants';
 import { expect } from '@glimmer/debug-util';
 
 import { ConcreteBounds } from '../bounds';
@@ -39,25 +40,35 @@ export class DOMOperations {
   }
 
   createElement(tag: string, context?: SimpleElement): SimpleElement {
-    let isElementInSVGNamespace: boolean, isHTMLIntegrationPoint: boolean;
+    let isElementInSVGNamespace: boolean,
+      isHTMLIntegrationPoint: boolean,
+      isElementInMathMlNamespace: boolean,
+      ns: Namespace;
 
     if (context) {
       isElementInSVGNamespace = context.namespaceURI === NS_SVG || tag === 'svg';
+      isElementInMathMlNamespace = context.namespaceURI === NS_MATHML || tag === 'math';
       isHTMLIntegrationPoint = !!(SVG_INTEGRATION_POINTS as Dict<number>)[context.tagName];
     } else {
       isElementInSVGNamespace = tag === 'svg';
+      isElementInMathMlNamespace = tag === 'math';
       isHTMLIntegrationPoint = false;
     }
 
-    if (isElementInSVGNamespace && !isHTMLIntegrationPoint) {
+    if ((isElementInMathMlNamespace || isElementInSVGNamespace) && !isHTMLIntegrationPoint) {
       // FIXME: This does not properly handle <font> with color, face, or
       // size attributes, which is also disallowed by the spec. We should fix
       // this.
       if (BLACKLIST_TABLE[tag]) {
         throw new Error(`Cannot create a ${tag} inside an SVG context`);
       }
+      if (isElementInMathMlNamespace) {
+        ns = NS_MATHML;
+      } else {
+        ns = NS_SVG;
+      }
 
-      return this.document.createElementNS(NS_SVG, tag);
+      return this.document.createElementNS(ns, tag);
     } else {
       return this.document.createElement(tag);
     }