| <!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> |
