fix(utilities): do not lowercase case-sensitive SVG tags

This fix only affects the client side.
remarkablemark · Jun 5, 2019 · 4083004 · 4083004
1 parent c8bcfbd
commit 4083004
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 1 deletion.
diff --git a/lib/constants.d.ts b/lib/constants.d.ts
@@ -0,0 +1,8 @@
+// TypeScript Version: 3.3
+
+/**
+ * SVG elements, unlike HTML elements, are case-sensitive.
+ *
+ * @see {@link https://developer.mozilla.org/docs/Web/SVG/Element#SVG_elements_A_to_Z}
+ */
+export const CASE_SENSITIVE_TAGS: string[];
diff --git a/lib/constants.js b/lib/constants.js
@@ -0,0 +1,44 @@
+'use strict';
+
+/**
+ * SVG elements, unlike HTML elements, are case-sensitive.
+ *
+ * @see {@link https://developer.mozilla.org/docs/Web/SVG/Element#SVG_elements_A_to_Z}
+ */
+var CASE_SENSITIVE_TAGS = [
+    'animateMotion',
+    'animateTransform',
+    'clipPath',
+    'feBlend',
+    'feColorMatrix',
+    'feComponentTransfer',
+    'feComposite',
+    'feConvolveMatrix',
+    'feDiffuseLighting',
+    'feDisplacementMap',
+    'feDropShadow',
+    'feFlood',
+    'feFuncA',
+    'feFuncB',
+    'feFuncG',
+    'feFuncR',
+    'feGaussainBlur',
+    'feImage',
+    'feMerge',
+    'feMergeNode',
+    'feMorphology',
+    'feOffset',
+    'fePointLight',
+    'feSpecularLighting',
+    'feSpotLight',
+    'feTile',
+    'feTurbulence',
+    'foreignObject',
+    'linearGradient',
+    'radialGradient',
+    'textPath',
+];
+
+module.exports = {
+    CASE_SENSITIVE_TAGS: CASE_SENSITIVE_TAGS,
+};
diff --git a/lib/utilities.js b/lib/utilities.js
@@ -1,5 +1,10 @@
 'use strict';
 
+var CASE_SENSITIVE_TAGS = require('./constants').CASE_SENSITIVE_TAGS
+var CASE_SENSITIVE_TAGS_LOWERCASE = CASE_SENSITIVE_TAGS.map(function(tag) {
+    return tag.toLowerCase();
+});
+
 /**
  * Format DOM attributes to an associative array.
  *
@@ -54,7 +59,16 @@ function formatDOM(nodes, parentObj, directive) {
         // set the node name if it's not "#text" or "#comment"
         // e.g., "div"
         if (node.nodeName.indexOf('#') !== 0) {
-            nodeObj.name = node.nodeName.toLowerCase();
+            var nodeName = node.nodeName;
+            var caseSensitiveTagIndex = CASE_SENSITIVE_TAGS_LOWERCASE.indexOf(nodeName.toLowerCase())
+            if (caseSensitiveTagIndex === -1) {
+                // lowercase if element is HTML
+                nodeName = nodeName.toLowerCase();
+            } else {
+                // fix case if element is case-sensitive SVG
+                nodeName = CASE_SENSITIVE_TAGS[caseSensitiveTagIndex]
+            }
+            nodeObj.name = nodeName;
 
             // also, nodes of type "tag" have "attribs"
             nodeObj.attribs = {}; // default

diff --git a/test/index.js b/test/index.js
@@ -6,6 +6,7 @@
 var assert = require('chai').assert;
 var cases = require('./cases');
 var htmlparser = require('htmlparser2');
+var CASE_SENSITIVE_TAGS = require('../lib/constants').CASE_SENSITIVE_TAGS;
 
 /**
  * Helper that creates and runs tests based on available cases.
@@ -44,6 +45,20 @@ function throwTests(parser) {
     });
 }
 
+/**
+ * Tests the case sensitive SVG tags to make sure their case is preserved.
+ *
+ * @param {Function} parser - The parser.
+ */
+function testCaseSensitiveTags(parser) {
+    it('preserves case of case-sensitive SVG tags', function() {
+        CASE_SENSITIVE_TAGS.forEach(function(tag) {
+            var parsed = parser('<' + tag + '></' + tag + '>');
+            assert.equal(parsed[0].name, tag);
+        });
+    });
+}
+
 /**
  * Tests for parser.
  */
@@ -71,6 +86,8 @@ describe('html-dom-parser', function() {
         runTests(parser, cases.html);
         runTests(parser, cases.svg);
 
+        testCaseSensitiveTags(parser);
+
         jsdomify.destroy();
     });
 });