linkedom/test/html/template-element.js at a9d77deac3c83ba424f4dbed47be83f46e85355d · WebReflection/linkedom · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
const assert = require('../assert.js').for('HTMLTemplateElement');

const {parseHTML} = global[Symbol.for('linkedom')];

let {document} = parseHTML('<template><div>foo</div><div>bar</div></template>');

let template = document.documentElement;
assert(template.innerHTML, '<div>foo</div><div>bar</div>');

assert(template.toString(), '<template><div>foo</div><div>bar</div></template>');
assert(document.toString(), '<template><div>foo</div><div>bar</div></template>');

assert(document.querySelector('template > *'), null);

assert(template.content, template.content);

template.replaceChildren();
assert(template.innerHTML, '<div>foo</div><div>bar</div>');

template.innerHTML = '<p>ok</p>';
assert(template.innerHTML, '<p>ok</p>');

template = document.createElement('template');
template.innerHTML = '<p>template</p>';
assert(template.content, template.content, 'template.content');
assert(template.innerHTML, '<p>template</p>', 'template.innerHTML');
document.documentElement.appendChild(template.content);
assert(template.innerHTML, '', 'empty template.innerHTML');

let html = `<!DOCTYPE html>
<html>

<template>
    <div></div>
</template>
<template>

</template>
</html>
`;

({document} = parseHTML(html));

assert(document.toString(), html);

const docWithTemplateAttribute = parseHTML(`<div template="anything"><p>not inside a template</p></div>`).document.documentElement;

assert(docWithTemplateAttribute.querySelector('*').tagName, 'P');
assert(docWithTemplateAttribute.querySelectorAll('*').length, 1);

template = document.createElement('template');
let fragment = document.createDocumentFragment();
let div = document.createElement('div')
div.innerHTML='<a>child element</a>';
fragment.append(div);
template.content.append(fragment);
assert(template.innerHTML, '<div><a>child element</a></div>', 'template.innerHTML');
assert(template.innerText, '', 'template.innerText');

template = document.createElement('template');
template.innerHTML='<div><a>child element  innerHTML</a></div>';
fragment = document.createDocumentFragment();
div = document.createElement('div');
div.innerHTML='<a>new child element</a>';
assert(Array.from(template.children).length, 0, 'template.appendChild zero');
template.appendChild(div);
assert(Array.from(template.children).length, 1, 'template.appendChild one');
assert(template.innerText, 'new child element', 'template.innerText');
assert(template.innerHTML, '<div><a>child element  innerHTML</a></div>', 'template.innerHTML The template maintains internal HTML even with additional children');