Fix non-lowercase SVG elements not closing

Closes GH-23.
syntax-tree · May 6, 2024 · 57c9910 · 57c9910
1 parent 671a5a4
commit 57c9910
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 9 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -523,6 +523,8 @@ function setPoint(state, point) {
  *   Nothing.
  */
 function startTag(node, state) {
+  const tagName = node.tagName.toLowerCase()
+
   // Ignore tags if we’re in plain text.
   if (state.parser.tokenizer.state === TokenizerMode.PLAINTEXT) return
 
@@ -531,7 +533,7 @@ function startTag(node, state) {
   const current = state.parser.openElements.current
   let ns = 'namespaceURI' in current ? current.namespaceURI : webNamespaces.html
 
-  if (ns === webNamespaces.html && node.tagName === 'svg') {
+  if (ns === webNamespaces.html && tagName === 'svg') {
     ns = webNamespaces.svg
   }
 
@@ -544,8 +546,8 @@ function startTag(node, state) {
   /** @type {TagToken} */
   const tag = {
     type: Token.TokenType.START_TAG,
-    tagName: node.tagName,
-    tagID: html.getTagID(node.tagName),
+    tagName,
+    tagID: html.getTagID(tagName),
     // We always send start and end tags.
     selfClosing: false,
     ackSelfClosing: false,
@@ -571,7 +573,7 @@ function startTag(node, state) {
   // do, such as:
 
   // Set a tag name, similar to how the tokenizer would do it.
-  state.parser.tokenizer.lastStartTagName = node.tagName
+  state.parser.tokenizer.lastStartTagName = tagName
 
   // `inForeignNode` is correctly set by the parser.
 }
@@ -587,10 +589,11 @@ function startTag(node, state) {
  *   Nothing.
  */
 function endTag(node, state) {
+  const tagName = node.tagName.toLowerCase()
   // Do not emit closing tags for HTML void elements.
   if (
     !state.parser.tokenizer.inForeignNode &&
-    htmlVoidElements.includes(node.tagName)
+    htmlVoidElements.includes(tagName)
   ) {
     return
   }
@@ -603,8 +606,8 @@ function endTag(node, state) {
   /** @type {TagToken} */
   const tag = {
     type: Token.TokenType.END_TAG,
-    tagName: node.tagName,
-    tagID: html.getTagID(node.tagName),
+    tagName,
+    tagID: html.getTagID(tagName),
     selfClosing: false,
     ackSelfClosing: false,
     attrs: [],
@@ -630,7 +633,7 @@ function endTag(node, state) {
   // tags:
   if (
     // Current element is closed.
-    tag.tagName === state.parser.tokenizer.lastStartTagName &&
+    tagName === state.parser.tokenizer.lastStartTagName &&
     // `<textarea>` and `<title>`
     (state.parser.tokenizer.state === TokenizerMode.RCDATA ||
       // `<iframe>`, `<noembed>`, `<style>`, `<xmp>`
@@ -655,7 +658,7 @@ function documentMode(node) {
   return Boolean(
     head &&
       (head.type === 'doctype' ||
-        (head.type === 'element' && head.tagName === 'html'))
+        (head.type === 'element' && head.tagName.toLowerCase() === 'html'))
   )
 }
 

diff --git a/test.js b/test.js
@@ -237,6 +237,35 @@ test('raw', async function (t) {
     )
   })
 
+  await t.test('should support camelcased SVG elements', async function () {
+    assert.deepEqual(
+      raw(
+        s(undefined, [
+          s('svg', [
+            s('circle'),
+            s('rect'),
+            s('linearGradient'),
+            s('path'),
+            s('g')
+          ])
+        ])
+      ),
+      {
+        type: 'root',
+        children: [
+          s('svg', [
+            s('circle'),
+            s('rect'),
+            s('linearGradient'),
+            s('path'),
+            s('g')
+          ])
+        ],
+        data: {quirksMode: false}
+      }
+    )
+  })
+
   await t.test(
     'should discard broken HTML when a proper element node is found',
     async function () {