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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
<!DOCTYPE html>
<title>DOM Parts: Basic object structure, {{}} declarative API</title>
<meta name="author" href="mailto:masonf@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/domparts-utils.js"></script>
<div id=context_elements>
<div></div>
<div parseparts></div>
<template></template>
<template parseparts class=expect_success></template>
</div>
<script>
function assertIsComment(node,commentText) {
assert_true(node instanceof Comment);
assert_equals(node.textContent,commentText);
}
const declarativeOpenerNoParseparts = '<h1>';
const declarativeOpenerParseparts = '<h1 parseparts>';
const declarativeContent = '{{#}}First{{#}}<span {{}}>Middle</span>{{/}}Last{{/}}</h1>';
Array.from(document.querySelectorAll('#context_elements>*')).forEach(contextEl => {
const expectParts = contextEl.classList.contains('expect_success');
[false,true].forEach(addParsePartsInside => {
const description = `${contextEl.outerHTML.split('><')[0]}><h1${addParsePartsInside ? " parseparts" : ""}>content...`;
const content = (addParsePartsInside ? declarativeOpenerParseparts : declarativeOpenerNoParseparts) + declarativeContent;
test((t) => {
const root = contextEl.content ? contextEl.content.getPartRoot() : document.getPartRoot();
assert_equals(root.getParts().length,0,'Should start with no parts');
t.add_cleanup(() => {
contextEl.replaceChildren();
root.getParts().forEach(part => part.disconnect());
});
contextEl.innerHTML = content;
if (expectParts) {
let expectedRootParts = [{type:'ChildNodePart',metadata:[]}];
assertEqualParts(root.getParts(),expectedRootParts,0,'declarative root missing parts');
const childPart1 = root.getParts()[0];
assertIsComment(childPart1.previousSibling,'');
assertIsComment(childPart1.nextSibling,'');
const expectedChild1Parts = [{type:'ChildNodePart',metadata:[]}];
assertEqualParts(childPart1.getParts(),expectedChild1Parts,0,'First level childpart should just have one child part');
const childPart2 = childPart1.getParts()[0];
assertIsComment(childPart2.previousSibling,'');
assertIsComment(childPart2.nextSibling,'');
const expectedChild2Parts = [{type:'NodePart',metadata:[]}];
assertEqualParts(childPart2.getParts(),expectedChild2Parts,0,'Second level childpart should have just the node part');
assert_true(childPart2.getParts()[0].node instanceof HTMLSpanElement);
assert_equals(childPart2.getParts()[0].node.textContent,'Middle');
} else {
assert_equals(root.getParts().length,0);
}
}, `Declarative DOM Parts innerHTML ${description} (expect${expectParts ? "" : " no"} parts)`);
});
});
test((t) => {
const tmpl = document.createElement('template');
tmpl.parseparts = true;
// See crbug.com/1490375.
tmpl.innerHTML = '<div {{}}></div>';
const root = tmpl.content.getPartRoot();
t.add_cleanup(() => {
tmpl.remove();
root.getParts().forEach(part => part.disconnect());
});
assert_equals(root.getParts().length,1,'There should be one NodePart');
}, `Basic NodePart parsing`);
test((t) => {
const tmpl = document.createElement('template');
tmpl.parseparts = true;
tmpl.innerHTML = ' <div id={{}} class={{}} foo=baz></div>';
const root = tmpl.content.getPartRoot();
t.add_cleanup(() => {
tmpl.remove();
root.getParts().forEach(part => part.disconnect());
});
assert_equals(root.getParts().length,0,'Declarative AttributeParts should be automatic, and should not show up in getParts()');
function checkBasics(checkContent,expectId,expectClass) {
const innerDiv = checkContent.firstElementChild;
assert_equals(innerDiv.localName,'div');
assert_equals(innerDiv.getAttribute('id'),expectId || '','Declarative AttributeParts id attribute');
assert_equals(innerDiv.getAttribute('class'),expectClass || '','Declarative AttributeParts class attribute');
assert_equals(innerDiv.getAttribute('foo'),'baz','Declarative AttributeParts should not touch other attributes');
return innerDiv;
}
checkBasics(tmpl.content);
const clone = root.clone();
const clonedDiv = checkBasics(clone.rootContainer);
const cloneWithValues = root.clone({attributeValues: ['foo','bar']});
const clonedDiv2 = checkBasics(cloneWithValues.rootContainer,'foo','bar');
}, `Basic AttributePart cloning with values`);
</script>
|
