fix rendering of void elements (aka unclosed)

In HTML5s, self-closing are only foreign elements (from MathML and SVG
namespace). What you call as unclosed elements is called void elements
in HTML5 spec.

https://html.spec.whatwg.org/multipage/syntax.html#elements-2
This commit is contained in:
Jakub Jirutka 2020-04-08 15:36:55 +02:00
parent 130245e09c
commit bd7734eaab
2 changed files with 4 additions and 7 deletions

View file

@ -157,13 +157,10 @@ export default class HTMLElement extends Node {
public toString() {
const tag = this.tagName;
if (tag) {
const is_un_closed = /^meta$/i.test(tag);
const is_self_closed = /^(img|br|hr|area|base|input|doctype|link)$/i.test(tag);
const is_void = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/i.test(tag);
const attrs = this.rawAttrs ? ' ' + this.rawAttrs : '';
if (is_un_closed) {
if (is_void) {
return `<${tag}${attrs}>`;
} else if (is_self_closed) {
return `<${tag}${attrs} />`;
} else {
return `<${tag}${attrs}>${this.innerHTML}</${tag}>`;
}

View file

@ -89,7 +89,7 @@ describe('HTML Parser', function () {
lowerCaseTagName: true
});
root.toString().should.eql('<html xmlns="http://www.w3.org/1999/xhtml" lang="pt" xml:lang="pt-br"><head><title>SISREG III</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ><meta http-equiv="Content-Language" content="pt-BR" ><link rel="stylesheet" href="/css/estilo.css" type="text/css" /><script type="text/javascript" src="/javascript/jquery.js" charset="utf-8"></script><script LANGUAGE=\'JavaScript\'></script></head><body link=\'#0000AA\' vlink=\'#0000AA\'><center><h1>CONSULTA AO CADASTRO DE PACIENTES SUS</h1></center><div id=\'progress_div\'><br /><br /><center><img src=\'/imagens/loading.gif\' /></center><center><span style=\'font-size: 80%\'>Processando...</span></center><br /><br /></div></body></html>');
root.toString().should.eql('<html xmlns="http://www.w3.org/1999/xhtml" lang="pt" xml:lang="pt-br"><head><title>SISREG III</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ><meta http-equiv="Content-Language" content="pt-BR" ><link rel="stylesheet" href="/css/estilo.css" type="text/css"><script type="text/javascript" src="/javascript/jquery.js" charset="utf-8"></script><script LANGUAGE=\'JavaScript\'></script></head><body link=\'#0000AA\' vlink=\'#0000AA\'><center><h1>CONSULTA AO CADASTRO DE PACIENTES SUS</h1></center><div id=\'progress_div\'><br><br><center><img src=\'/imagens/loading.gif\' ></center><center><span style=\'font-size: 80%\'>Processando...</span></center><br><br></div></body></html>');
// root.toString().firstChild.should.eql(div);
});
@ -432,7 +432,7 @@ describe('HTML Parser', function () {
const root = parseHTML('<input required>');
const input = root.firstChild;
input.removeAttribute('required');
input.toString().should.eql('<input />');
input.toString().should.eql('<input>');
});
describe('#hasAttribute', function () {