92 lines
5.1 KiB
HTML
92 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Shadow DOM: slotchange event in fallback content</title>
|
|
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
|
|
<link rel="help" href="https://dom.spec.whatwg.org/#signaling-slot-change">
|
|
<link rel="help" href="https://dom.spec.whatwg.org/#concept-node-insert">
|
|
<script src="../../resources/testharness.js"></script>
|
|
<script src="../../resources/testharnessreport.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="log"></div>
|
|
<script>
|
|
|
|
function generateTests(...args) {
|
|
testMutatingSlot('closed', true, ...args);
|
|
testMutatingSlot('closed', false, ...args);
|
|
testMutatingSlot('open', true, ...args);
|
|
testMutatingSlot('open', false, ...args);
|
|
}
|
|
|
|
function testMutatingSlot(mode, connectedToDocument, hostContent, slotName, prepareSlot, mutateSlot, description)
|
|
{
|
|
promise_test(async function () {
|
|
const host = document.createElement('div');
|
|
if (connectedToDocument)
|
|
document.body.appendChild(host);
|
|
if (hostContent)
|
|
host.innerHTML = hostContent;
|
|
|
|
const shadowRoot = host.attachShadow({mode});
|
|
|
|
const slot = document.createElement('slot');
|
|
let eventCount = 0;
|
|
if (slotName)
|
|
slot.name = slotName;
|
|
prepareSlot(slot);
|
|
slot.addEventListener('slotchange', () => eventCount++);
|
|
|
|
shadowRoot.appendChild(slot);
|
|
|
|
await Promise.resolve();
|
|
eventCount = 0;
|
|
|
|
mutateSlot(slot);
|
|
await Promise.resolve();
|
|
assert_equals(eventCount, hostContent ? 0 : 1);
|
|
|
|
host.remove();
|
|
}, description + ` in a ${connectedToDocument ? 'connected' : 'disconnected'} ${mode} mode shadow root`);
|
|
}
|
|
|
|
generateTests(null, null, () => { }, (slot) => slot.append('some text'),
|
|
'slotchange event should be fired when appending a text node to a default slot whose assigned nodes is empty');
|
|
generateTests(null, 'foo', () => { }, (slot) => slot.append('some text'),
|
|
'slotchange event should be fired when appending a text node to a named slot whose assigned nodes is empty');
|
|
generateTests(null, null, () => { }, (slot) => slot.append(document.createTextNode('div')),
|
|
'slotchange event should be fired when appending a div to a default slot whose assigned nodes is empty');
|
|
generateTests(null, 'foo', () => { }, (slot) => slot.append(document.createTextNode('div')),
|
|
'slotchange event should be fired when appending a div to a named slot whose assigned nodes is empty');
|
|
|
|
generateTests(null, null, (slot) => slot.append('hello'), (slot) => slot.firstChild.remove(),
|
|
'slotchange event should be fired when removing a text node from a default slot whose assigned nodes is empty');
|
|
generateTests(null, 'foo', (slot) => slot.append('hello'), (slot) => slot.firstChild.remove(),
|
|
'slotchange event should be fired when removing a text node from a named slot whose assigned nodes is empty');
|
|
generateTests(null, 'foo', (slot) => slot.append(document.createElement('div')), (slot) => slot.firstChild.remove(),
|
|
'slotchange event should be fired when removing a div from a default slot whose assigned nodes is empty');
|
|
generateTests(null, 'foo', (slot) => slot.append(document.createElement('div')), (slot) => slot.firstChild.remove(),
|
|
'slotchange event should be fired when removing a div from a named slot whose assigned nodes is empty');
|
|
|
|
generateTests('hello', null, () => { }, (slot) => slot.append('some text'),
|
|
'slotchange event should not be fired when appending a text node to a default slot whose assigned nodes is not empty');
|
|
generateTests('<div slot="foo"></div>', 'foo', () => { }, (slot) => slot.append('some text'),
|
|
'slotchange event should not be fired when appending a text node to a named slot whose assigned nodes is not empty');
|
|
generateTests('<div></div>', null, () => { }, (slot) => slot.append(document.createTextNode('div')),
|
|
'slotchange event should not be fired when appending a div to a default slot whose assigned nodes is not empty');
|
|
generateTests('<div slot="foo"></div>', 'foo', () => { }, (slot) => slot.append(document.createTextNode('div')),
|
|
'slotchange event should not be fired when appending a div to a named slot whose assigned nodes is not empty');
|
|
|
|
generateTests('<span></span>', null, (slot) => slot.append('hello'), (slot) => slot.firstChild.remove(),
|
|
'slotchange event should not be fired when removing a text node from a default slot whose assigned nodes is empty');
|
|
generateTests('<span slot="foo"></span>', 'foo', (slot) => slot.append('hello'), (slot) => slot.firstChild.remove(),
|
|
'slotchange event should not be fired when removing a text node from a named slot whose assigned nodes is empty');
|
|
generateTests('<span></span>', null, (slot) => slot.append(document.createElement('div')), (slot) => slot.firstChild.remove(),
|
|
'slotchange event should not be fired when removing a div from a default slot whose assigned nodes is empty');
|
|
generateTests('<span slot="foo"></span>', 'foo', (slot) => slot.append(document.createElement('div')), (slot) => slot.firstChild.remove(),
|
|
'slotchange event should not be fired when removing a div from a named slot whose assigned nodes is empty');
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|