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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<!DOCTYPE html>
<title>Declarative Shadow DOM</title>
<link rel='author' href='mailto:masonf@chromium.org'>
<link rel='help' href='https://github.com/whatwg/dom/issues/831'>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<body>
<script>
let templatesSeen = 0;
function myObserver(mutationsList, observer) {
document.querySelectorAll('.host').forEach(n => {
templatesSeen++;
n.className = 'done';
switch (n.id) {
case 'openhost':
case 'closedhost':
assert_equals(n.querySelector('template'),null,'No template ever for streaming declarative Shadow DOM');
assert_equals(n.innerHTML, "", 'Declarative shadow host innerHTML should be empty - all content is inside shadow');
break;
case 'noroot':
const template = n.querySelector('template');
assert_true(!!template,'Regular template should still be present');
// Make sure adding 'shadowrootmode' attribute doesn't trigger a shadow root,
// even if added before parsing completes.
template.setAttribute('shadowrootmode','open');
assert_not_equals(template.content, null, 'Regular template should have content, even after adding shadowrootmode attribute');
assert_not_equals(template.innerHTML, "", 'Regular template should have innerHTML, even after adding shadowrootmode attribute');
break;
default:
assert_unreached('Unrecognized template');
}
});
}
const observer = new MutationObserver(myObserver);
observer.observe(document.body, { childList: true, subtree: true });
assert_equals(templatesSeen, 0, 'No mutations yet');
</script>
<div id=openhost class=host><template shadowrootmode=open>
<slot></slot>
<!-- Ensure observer runs at this point (https://github.com/web-platform-tests/wpt/issues/35393) -->
<script> // some content, which shouldn't be necessary </script>
</template></div>
<div id=closedhost class=host><template shadowrootmode=closed>
<slot></slot>
<!-- Ensure observer runs at this point (https://github.com/web-platform-tests/wpt/issues/35393) -->
<script> // some content, which shouldn't be necessary </script>
</template></div>
<div id=noroot class=host><template>
<slot></slot>
<!-- Ensure observer runs at this point (https://github.com/web-platform-tests/wpt/issues/35393) -->
<script> // some content, which shouldn't be necessary </script>
</template></div>
<script>
test(t => {
t.add_cleanup(function() { observer.disconnect(); });
assert_equals(templatesSeen, 3);
// Open shadow root
let host = document.querySelector('#openhost');
assert_equals(host.querySelector('template'), null, 'No template nodes');
assert_true(!!host.shadowRoot, 'Shadow root should exist');
// Closed shadow root
host = document.querySelector('#closedhost');
assert_equals(host.querySelector('template'), null, 'No template nodes');
assert_true(!host.shadowRoot, 'Closed shadow root (can\'t detect)');
// No shadow root
host = document.querySelector('#noroot');
assert_true(!!host.querySelector('template'), 'Template node still present for invalid shadowrootmode value');
assert_true(!host.shadowRoot, 'No shadow root');
},'Streaming Declarative Shadow DOM: template .content() should be null');
</script>
<script>
let synchronous_events_received = new Set();
function synchronousHandler(e) {
synchronous_events_received.add(e.type);
}
const sync_events = ["DOMAttrModified","DOMAttributeNameChanged","DOMCharacterDataModified",
"DOMElementNameChanged","DOMNodeInserted","DOMNodeInsertedIntoDocument","DOMNodeRemoved",
"DOMNodeRemovedFromDocument","DOMSubtreeModified"];
function addSyncObserver(evt) {
window.addEventListener(evt, synchronousHandler, true);
}
function removeSyncObserver(evt) {
window.removeEventListener(evt, synchronousHandler, true);
}
sync_events.forEach(e => addSyncObserver(e));
</script>
<div id=synchost1>
<template shadowrootmode=open>
<div class=foo>content</div>
<slot></slot>
</template>
</div>
<div id=synchost2>
<template shadowrootmode=closed>
<div class=foo>content</div>
<slot></slot>
</template>
</div>
<script>
test(t => {
t.add_cleanup(function() { sync_events.forEach(e => removeSyncObserver(e)) });
assert_true(!synchronous_events_received.size,`Synchronous mutation events fired: ${Array.from(synchronous_events_received)}`);
},'Synchronous mutation events should not be fired during streaming declarative shadow DOM parsing');
</script>
|
