Feature: Basic mathml support

packages/@glimmer-workspace/integration-tests/test/math-test.ts

@@ -0,0 +1,82 @@
+import type { Namespace } from '@glimmer/interfaces';
+import { NS_HTML, NS_MATHML, NS_SVG } from '@glimmer/constants';
+
+import { defineComponent, jitSuite, RenderTest, test } from '..';
+
+class MathElementTest extends RenderTest {
+  static suiteName = '<math>';
+  query(selector: string) {
+    let el = (s: string) => (this.element as unknown as HTMLElement).querySelector(s);
+    return el(selector) as Element;
+  }
+  assertNamespace(selector: string, ns: Namespace) {
+    this.assert.strictEqual(
+      this.query(selector).namespaceURI,
+      ns,
+      `Expecting "${ns}" namespace for tag "${selector}"`
+    );
+  }
+
+  @test
+  '<math> element can render'() {
+    const Bar = defineComponent({}, '<math><msqrt><mi>x</mi></msqrt></math>');
+
+    this.renderComponent(Bar);
+
+    this.assertNamespace('math', NS_MATHML);
+    this.assertNamespace('msqrt', NS_MATHML);
+    this.assertNamespace('mi', NS_MATHML);
+  }
+
+  @test
+  'HTML and <math> element can render together'() {
+    const Bar = defineComponent(
+      {},
+      '<div><p>Math inside:</p><math><msqrt><mi>x</mi></msqrt></math></div>'
+    );
+
+    this.renderComponent(Bar);
+
+    this.assertNamespace('div', NS_HTML);
+    this.assertNamespace('p', NS_HTML);
+    this.assertNamespace('math', NS_MATHML);
+    this.assertNamespace('msqrt', NS_MATHML);
+    this.assertNamespace('mi', NS_MATHML);
+  }
+
+  @test
+  'SVG and <math> element can render together'() {
+    const Bar = defineComponent(
+      {},
+      '<svg><circle cx="50" cy="50" r="40" /></svg><math><msqrt><mi>x</mi></msqrt></math>'
+    );
+
+    this.renderComponent(Bar);
+
+    this.assertNamespace('svg', NS_SVG);
+    this.assertNamespace('circle', NS_SVG);
+    this.assertNamespace('math', NS_MATHML);
+    this.assertNamespace('msqrt', NS_MATHML);
+    this.assertNamespace('mi', NS_MATHML);
+  }
+
+  @test
+  'HTML, SVG, and <math> element can render together'() {
+    const Bar = defineComponent(
+      {},
+      '<div><p>Math and SVG inside:</p><svg><circle cx="50" cy="50" r="40" /></svg><math><msqrt><mi>x</mi></msqrt></math></div>'
+    );
+
+    this.renderComponent(Bar);
+
+    this.assertNamespace('div', NS_HTML);
+    this.assertNamespace('p', NS_HTML);
+    this.assertNamespace('svg', NS_SVG);
+    this.assertNamespace('circle', NS_SVG);
+    this.assertNamespace('math', NS_MATHML);
+    this.assertNamespace('msqrt', NS_MATHML);
+    this.assertNamespace('mi', NS_MATHML);
+  }
+}
+
+jitSuite(MathElementTest);

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