119 lines
4.4 KiB
HTML
119 lines
4.4 KiB
HTML
<!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>
|