fix: compare tag and attribute names case insensitively (#1937)

HTML tag and attribute names are ASCII case insensitive, and the parser hands
them over exactly as they were written. Two default-on rules compare them raw,
so the identical violation spelled in a different case is silently unreported.

src-not-empty tests the tag with /^(img|script|embed|bgsound|iframe)$/, with no
i flag, and the attribute with attr.name === 'src'. So <img src=""> is reported
and <img SRC="">, <IMG src=""> and <IMG SRC=""> are not. The same applies to
link/href and object/data.

attr-no-duplication keys its seen-set on the raw attribute name, so
<div id="a" id="b"> is reported and <div ID="a" id="b"> is not.

28 of the 44 rules already normalise with toLowerCase; this brings these two
into line. The reported message still echoes the attribute as the author wrote
it.

Signed-off-by: Arpit Jain <arpitjain099@gmail.com>

Author: arpitjain099

dist/core/rules/attr-no-duplication.js

@@ -14,7 +14,9 @@ export default {
 
       for (let i = 0, l = attrs.length; i < l; i++) {
         attr = attrs[i]
-        attrName = attr.name
+        // HTML attribute names are ASCII case insensitive, so id and ID on the
+        // same element are a duplicate.
+        attrName = attr.name.toLowerCase()
 
         if (mapAttrName[attrName] === true) {
           reporter.error(

dist/core/rules/src-not-empty.js

@@ -5,19 +5,23 @@ export default {
   description: 'The src attribute of an img(script,link) must have a value.',
   init(parser, reporter) {
     parser.addListener('tagstart', (event) => {
-      const tagName = event.tagName
+      // HTML tag and attribute names are ASCII case insensitive, so compare
+      // against the lowercased form. The parser hands them over exactly as they
+      // were written.
+      const tagName = event.tagName.toLowerCase()
       const attrs = event.attrs
       let attr
       const col = event.col + tagName.length + 1
 
       for (let i = 0, l = attrs.length; i < l; i++) {
         attr = attrs[i]
+        const attrName = attr.name.toLowerCase()
 
         if (
           ((/^(img|script|embed|bgsound|iframe)$/.test(tagName) === true &&
-            attr.name === 'src') ||
-            (tagName === 'link' && attr.name === 'href') ||
-            (tagName === 'object' && attr.name === 'data')) &&
+            attrName === 'src') ||
+            (tagName === 'link' && attrName === 'href') ||
+            (tagName === 'object' && attrName === 'data')) &&
           attr.value === ''
         ) {
           reporter.error(

src/core/rules/attr-no-duplication.ts

@@ -15,6 +15,15 @@ describe(`Rules: ${ruleId}`, () => {
     expect(messages[0].col).toBe(12)
   })
 
+  it('Attribute name duplicated in a different case should result in an error', () => {
+    // HTML attribute names are ASCII case insensitive, so href and HREF on the
+    // same element are the same attribute.
+    const code = '<a href="a" HREF="b">bbb</a>'
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).toBe(1)
+    expect(messages[0].rule.id).toBe(ruleId)
+  })
+
   it('Attribute name not been duplication should not result in an error', () => {
     const code = '<a href="a">bbb</a>'
     const messages = HTMLHint.verify(code, ruleOptions)

src/core/rules/src-not-empty.ts

@@ -20,6 +20,20 @@ describe(`Rules: ${ruleId}`, () => {
     expect(messages.length).toBe(0)
   })
 
+  it('Src be empty should result in an error whatever the case', () => {
+    // HTML tag and attribute names are ASCII case insensitive, so these are four
+    // spellings of one bug and all four have to be reported.
+    const code = '<img src="" /><img SRC="" /><IMG src="" /><IMG SRC="" />'
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).toBe(4)
+  })
+
+  it('Uppercase href and data should result in an error', () => {
+    const code = '<LINK HREF="" type="text/css" /><OBJECT DATA="">'
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).toBe(2)
+  })
+
   it('Src be not set value should not result in an error', () => {
     const code =
       '<img width="200" /><script></script><link type="text/css" /><embed width="200"><bgsound /><iframe width="200"><object width="200">'