fix: #248 void tag

Author: taoqf

src/nodes/html.ts

@@ -912,36 +912,6 @@ export default class HTMLElement extends Node {
 // https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
 const kMarkupPattern = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/g;
 const kAttributePattern = /(?:^|\s)(id|class)\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+)/gi;
-const kSelfClosingElements = {
-	area: true,
-	AREA: true,
-	base: true,
-	BASE: true,
-	br: true,
-	BR: true,
-	col: true,
-	COL: true,
-	hr: true,
-	HR: true,
-	img: true,
-	IMG: true,
-	input: true,
-	INPUT: true,
-	link: true,
-	LINK: true,
-	meta: true,
-	META: true,
-	source: true,
-	SOURCE: true,
-	embed: true,
-	EMBED: true,
-	param: true,
-	PARAM: true,
-	track: true,
-	TRACK: true,
-	wbr: true,
-	WBR: true,
-} as Record<string, boolean>;
 const kElementsClosedByOpening = {
 	li: { li: true, LI: true },
 	LI: { li: true, LI: true },
@@ -1150,7 +1120,7 @@ export function base_parse(data: string, options = {} as Partial<Options>) {
 		}
 
 		// Handle closing tags or self-closed elements (ie </tag> or <br>)
-		if (leadingSlash || closingSlash || kSelfClosingElements[tagName]) {
+		if (leadingSlash || closingSlash || voidTag.isVoidElement(tagName)) {
 			while (true) {
 				if (noNestedTagIndex != null && (tagName === 'a' || tagName === 'A')) noNestedTagIndex = undefined;
 				if (currentParent.rawTagName === tagName) {

src/void-tag.ts

@@ -6,11 +6,11 @@ export default class VoidTag {
 	) {
 		if (Array.isArray(tags)) {
 			this.voidTags = tags.reduce((set, tag) => {
-				return set.add(tag.toLowerCase());
+				return set.add(tag.toLowerCase()).add(tag.toUpperCase()).add(tag);
 			}, new Set<string>());
 		} else {
 			this.voidTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'].reduce((set, tag) => {
-				return set.add(tag);
+				return set.add(tag.toLowerCase()).add(tag.toUpperCase()).add(tag);
 			}, new Set<string>());
 		}
 	}

test/tests/issues/242.js

@@ -1,6 +1,6 @@
 const { parse } = require('@test/test-target');
 
-describe.only('issue 242', function () {
+describe('issue 242', function () {
 	it(`a.rawAttrs returns 'href="/" rel="home"' but a.getAttribute("href') returns undefined`, function () {
 		const html = `<div><a href="/" rel="home">Git Hub</a></div>`;
 		const root = parse(html);

test/tests/issues/248.js

@@ -0,0 +1,25 @@
+const { valid } = require('@test/test-target');
+
+describe('issue 248', function () {
+	it('void tag', function () {
+		const voidTags = ['x-tag'];
+		const html = `<div><x-tag></div>`;
+		// => false. Expected to be true
+		valid(html, {
+			voidTag: {
+				tags: voidTags,
+			}
+		}).should.eql(true);
+	});
+	it('selfclosed tag', function () {
+		const voidTags = ['x-tag'];
+		const html = `<div><x-tag /></div>`;
+		// => false. Expected to be true
+		valid(html, {
+			voidTag: {
+				tags: voidTags,
+				closingSlash: true
+			}
+		}).should.eql(true);
+	});
+});

test/tests/pre.js

@@ -21,23 +21,15 @@ describe('pre tag', function () {
 		root.toString().should.eql(html);
 	});
 	it('should ignore pre tag', function () {
-		const html = `
-    <div class="language-python highlighter-rouge">
-      <div class="highlight"> <pre class="highlight"><code><span class="k">print</span><span class="p">(</span><span class="s">'hello'</span><span class="p">)</span><br><span class="n">i</span> <span class="o">=</span> <span class="n">i</span> <span class="o">+</span> <span class="mi">1</span><br></code></pre>
-      </div>
-    </div>
-    `;
+		const html = `<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">print</span><span class="p">(</span><span class="s">'hello'</span><span class="p">)</span><br><span class="n">i</span> <span class="o">=</span> <span class="n">i</span> <span class="o">+</span> <span class="mi">1</span><br></code></pre></div></div>`;
 		const root = parse(html, {
 			blockTextElements: {
-				pre: false
+				pre: true
 			}
 		});
-		root.toString().should.eql(`
-    <div class="language-python highlighter-rouge">
-      <div class="highlight"> <pre class="highlight"></pre>
-      </div>
-    </div>
-    `);
+		const div = root.firstChild.firstChild;
+		const pre = div.firstChild;
+		pre.text.should.eql(`<code><span class="k">print</span><span class="p">(</span><span class="s">'hello'</span><span class="p">)</span><br><span class="n">i</span> <span class="o">=</span> <span class="n">i</span> <span class="o">+</span> <span class="mi">1</span><br></code>`);
 	});
 	it('do not treat pre as text block element', function () {
 		const html = `<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">print</span><span class="p">(</span><span class="s">'hello'</span><span class="p">)</span><br><span class="n">i</span><span class="o">=</span><span class="n">i</span><span class="o">+</span><span class="mi">1</span><br></code></pre>
@@ -54,8 +46,8 @@ describe('pre tag', function () {
 	});
 	// see: https://github.com/taoqf/node-html-parser/issues/156
 	it('does not treat pre* tag as pre (partial match)', () => {
-    const docRoot = parse("<premises><color>Red</color></premises>");
-    Object.getPrototypeOf(docRoot.firstChild.firstChild).should.eql(HTMLElement.prototype);
-    docRoot.firstChild.firstChild.tagName.should.eql('COLOR');
-  })
+		const docRoot = parse("<premises><color>Red</color></premises>");
+		Object.getPrototypeOf(docRoot.firstChild.firstChild).should.eql(HTMLElement.prototype);
+		docRoot.firstChild.firstChild.tagName.should.eql('COLOR');
+	})
 });