LayoutTests/fast/shadow-dom/slotchange-event-bubbling.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <title>Shadow DOM: slotchange event</title>
 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
 <link rel="help" href="https://dom.spec.whatwg.org/#signaling-slot-change">
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 </head>
 <body>
 <script>

 function create_slotchange_observer() {
     let log = [];
     const listener = function (event) {
         log.push({node: this, event: event, eventType: event.type, eventTarget: event.target});
     }
     return {
         observe: (node) => node.addEventListener('slotchange', listener),
         takeLog: () => {
             const currentLog = log;
             log = [];
             return currentLog;
         }
     };
 }

 function assert_slotchange_log(logEntry, node, target, description) {
     assert_equals(logEntry.node, node, description);
     assert_equals(logEntry.eventType, 'slotchange', description);
     assert_equals(logEntry.eventTarget, target, description);
 }

 function test_slotchange_event_bubbles(mode, connected) {
     promise_test(() => {
         const host = document.createElement('div');
         if (connected)
             document.body.appendChild(host);

         const shadowRoot = host.attachShadow({'mode': mode});
         shadowRoot.innerHTML = '<div><slot></slot></div>';
         const container = shadowRoot.querySelector('div');
         const slot = shadowRoot.querySelector('slot');

         const observer = create_slotchange_observer();
         observer.observe(slot);
         observer.observe(container);
         observer.observe(shadowRoot);
         observer.observe(host);
         observer.observe(document);
         observer.observe(window);

         shadowRoot.appendChild(container);
         host.appendChild(document.createElement('span'));
         host.appendChild(document.createElement('b'));

         assert_array_equals(observer.takeLog(), [], 'slotchange event must not be fired synchronously');
         return Promise.resolve().then(() => {
             const log = observer.takeLog();

             const events = new Set(log.map((entry) => entry.event));
             assert_equals(events.size, 1, 'Mutating the assigned content of a slot must fire exactly one slotchange event');

             assert_slotchange_log(log[0], slot, slot, 'slotchange event must be dispatched at the slot element first');
             assert_slotchange_log(log[1], container, slot, 'slotchange event must bubble up to the parent node of the slot');
             assert_slotchange_log(log[2], shadowRoot, slot, 'slotchange event must bubble up to the shadow root');
             assert_equals(log.length, 3, 'slotchange must not bubble beyond the shadow root');
         });
     }, `slotchange event must bubble in a ${connected ? 'connected' : 'disconnected'} ${mode}-mode shadow tree`);
 }

 test_slotchange_event_bubbles('closed', false);
 test_slotchange_event_bubbles('closed', true);
 test_slotchange_event_bubbles('open', false);
 test_slotchange_event_bubbles('open', true);

 function test_single_slotchange_event_for_nested_slots(outerMode, innerMode, connected) {
     promise_test(async () => {
         const outerHost = document.createElement('outer-host');
         if (connected)
             document.body.appendChild(outerHost);

         const outerShadow = outerHost.attachShadow({'mode': outerMode});
         outerShadow.innerHTML = '<div><inner-host><slot></slot></inner-host></div>';
         const outerHostParent = outerShadow.querySelector('div');
         const outerSlot = outerShadow.querySelector('slot');

         const innerHost = outerShadow.querySelector('inner-host');
         const innerShadow = innerHost.attachShadow({'mode': innerMode});
         innerShadow.innerHTML = '<div><slot></slot></div>';
         const innerSlotParent = innerShadow.querySelector('div');
         const innerSlot = innerShadow.querySelector('slot');

         await Promise.resolve();

         const observer = create_slotchange_observer();
         observer.observe(outerSlot);
         observer.observe(innerHost);

         observer.observe(window);
         observer.observe(document);
         observer.observe(outerHost);
         observer.observe(outerShadow);
         observer.observe(outerHostParent);
         observer.observe(outerSlot);
         observer.observe(innerHost);
         observer.observe(innerShadow);
         observer.observe(innerSlotParent);
         observer.observe(innerSlot);

         outerHost.textContent = ' ';

         assert_array_equals(observer.takeLog(), [], 'slotchange event must not be fired synchronously');
         await Promise.resolve();

         const log = observer.takeLog();

         const events = new Set(log.map((entry) => entry.event));
         assert_equals(events.size, 1, 'Mutating the assigned content of a slot must fire exactly one slotchange event');

         assert_slotchange_log(log[0], outerSlot, outerSlot, 'slotchange event must be dispatched at the slot element first');
         assert_slotchange_log(log[1], innerSlot, outerSlot, 'slotchange event must bubble up from a slot element to its assigned slot');
         assert_slotchange_log(log[2], innerSlotParent, outerSlot, 'slotchange event must bubble up to the parent node of a slot');
         assert_slotchange_log(log[3], innerShadow, outerSlot, 'slotchange event must bubble up to the shadow root');
         assert_slotchange_log(log[4], innerHost, outerSlot,
             'slotchange event must bubble up to the shadow host if the host is a descendent of the tree in which the event was fired');
         assert_slotchange_log(log[5], outerHostParent, outerSlot,
             'slotchange event must bubble up to the parent of an inner shadow host');
         assert_slotchange_log(log[6], outerShadow, outerSlot, 'slotchange event must bubble up to the shadow root');
         assert_equals(log.length, 7, 'slotchange must not bubble beyond the shadow root in which the event was fired');
     }, `A single slotchange event must bubble from a ${connected ? 'connected' : 'disconnected'} ${innerMode}-mode shadow tree to`
         + `a slot in its parent ${outerMode}-mode shadow tree`);
 }

 test_single_slotchange_event_for_nested_slots('closed', 'closed', false);
 test_single_slotchange_event_for_nested_slots('closed', 'closed', true);
 test_single_slotchange_event_for_nested_slots('closed', 'open', false);
 test_single_slotchange_event_for_nested_slots('closed', 'open', true);

 test_single_slotchange_event_for_nested_slots('open', 'closed', false);
 test_single_slotchange_event_for_nested_slots('open', 'closed', true);
 test_single_slotchange_event_for_nested_slots('open', 'open', false);
 test_single_slotchange_event_for_nested_slots('open', 'open', true);

 function test_slotchange_event_fired_without_listener_on_slot(mode, connected) {
     promise_test(() => {
         const host = document.createElement('div');
         if (connected)
             document.body.appendChild(host);

         const shadowRoot = host.attachShadow({'mode': mode});
         shadowRoot.innerHTML = '<div><slot></slot></div>';
         const container = shadowRoot.querySelector('div');
         const slot = shadowRoot.querySelector('slot');

         const observer = create_slotchange_observer();
         observer.observe(container);
         observer.observe(shadowRoot);
         observer.observe(host);
         observer.observe(document);
         observer.observe(window);

         shadowRoot.appendChild(container);
         host.appendChild(document.createElement('span'));
         host.appendChild(document.createElement('b'));

         assert_array_equals(observer.takeLog(), [], 'slotchange event must not be fired synchronously');
         return Promise.resolve().then(() => {
             const log = observer.takeLog();

             const events = new Set(log.map((entry) => entry.event));
             assert_equals(events.size, 1, 'Mutating the assigned content of a slot must fire exactly one slotchange event');

             assert_slotchange_log(log[0], container, slot, 'slotchange event must bubble up to the parent node of the slot');
             assert_slotchange_log(log[1], shadowRoot, slot, 'slotchange event must bubble up to the shadow root');
             assert_equals(log.length, 2, 'slotchange must not bubble beyond the shadow root');
         });
     }, `slotchange event must be fired in a ${connected ? 'connected' : 'disconnected'} ${mode}-mode shadow tree`
         + ` even when the slot element itself lacks a event listener.`);
 }

 test_slotchange_event_fired_without_listener_on_slot('closed', false);
 test_slotchange_event_fired_without_listener_on_slot('closed', true);
 test_slotchange_event_fired_without_listener_on_slot('open', false);
 test_slotchange_event_fired_without_listener_on_slot('open', true);

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Shadow DOM: slotchange event</title>
	<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
	<link rel="help" href="https://dom.spec.whatwg.org/#signaling-slot-change">
	<script src="../../resources/testharness.js"></script>
	<script src="../../resources/testharnessreport.js"></script>
	</head>
	<body>
	<script>

	function create_slotchange_observer() {
	let log = [];
	const listener = function (event) {
	log.push({node: this, event: event, eventType: event.type, eventTarget: event.target});
	}
	return {
	observe: (node) => node.addEventListener('slotchange', listener),
	takeLog: () => {
	const currentLog = log;
	log = [];
	return currentLog;
	}
	};
	}

	function assert_slotchange_log(logEntry, node, target, description) {
	assert_equals(logEntry.node, node, description);
	assert_equals(logEntry.eventType, 'slotchange', description);
	assert_equals(logEntry.eventTarget, target, description);
	}

	function test_slotchange_event_bubbles(mode, connected) {
	promise_test(() => {
	const host = document.createElement('div');
	if (connected)
	document.body.appendChild(host);

	const shadowRoot = host.attachShadow({'mode': mode});
	shadowRoot.innerHTML = '<div><slot></slot></div>';
	const container = shadowRoot.querySelector('div');
	const slot = shadowRoot.querySelector('slot');

	const observer = create_slotchange_observer();
	observer.observe(slot);
	observer.observe(container);
	observer.observe(shadowRoot);
	observer.observe(host);
	observer.observe(document);
	observer.observe(window);

	shadowRoot.appendChild(container);
	host.appendChild(document.createElement('span'));
	host.appendChild(document.createElement('b'));

	assert_array_equals(observer.takeLog(), [], 'slotchange event must not be fired synchronously');
	return Promise.resolve().then(() => {
	const log = observer.takeLog();

	const events = new Set(log.map((entry) => entry.event));
	assert_equals(events.size, 1, 'Mutating the assigned content of a slot must fire exactly one slotchange event');

	assert_slotchange_log(log[0], slot, slot, 'slotchange event must be dispatched at the slot element first');
	assert_slotchange_log(log[1], container, slot, 'slotchange event must bubble up to the parent node of the slot');
	assert_slotchange_log(log[2], shadowRoot, slot, 'slotchange event must bubble up to the shadow root');
	assert_equals(log.length, 3, 'slotchange must not bubble beyond the shadow root');
	});
	}, `slotchange event must bubble in a ${connected ? 'connected' : 'disconnected'} ${mode}-mode shadow tree`);
	}

	test_slotchange_event_bubbles('closed', false);
	test_slotchange_event_bubbles('closed', true);
	test_slotchange_event_bubbles('open', false);
	test_slotchange_event_bubbles('open', true);

	function test_single_slotchange_event_for_nested_slots(outerMode, innerMode, connected) {
	promise_test(async () => {
	const outerHost = document.createElement('outer-host');
	if (connected)
	document.body.appendChild(outerHost);

	const outerShadow = outerHost.attachShadow({'mode': outerMode});
	outerShadow.innerHTML = '<div><inner-host><slot></slot></inner-host></div>';
	const outerHostParent = outerShadow.querySelector('div');
	const outerSlot = outerShadow.querySelector('slot');

	const innerHost = outerShadow.querySelector('inner-host');
	const innerShadow = innerHost.attachShadow({'mode': innerMode});
	innerShadow.innerHTML = '<div><slot></slot></div>';
	const innerSlotParent = innerShadow.querySelector('div');
	const innerSlot = innerShadow.querySelector('slot');

	await Promise.resolve();

	const observer = create_slotchange_observer();
	observer.observe(outerSlot);
	observer.observe(innerHost);

	observer.observe(window);
	observer.observe(document);
	observer.observe(outerHost);
	observer.observe(outerShadow);
	observer.observe(outerHostParent);
	observer.observe(outerSlot);
	observer.observe(innerHost);
	observer.observe(innerShadow);
	observer.observe(innerSlotParent);
	observer.observe(innerSlot);

	outerHost.textContent = ' ';

	assert_array_equals(observer.takeLog(), [], 'slotchange event must not be fired synchronously');
	await Promise.resolve();

	const log = observer.takeLog();

	const events = new Set(log.map((entry) => entry.event));
	assert_equals(events.size, 1, 'Mutating the assigned content of a slot must fire exactly one slotchange event');

	assert_slotchange_log(log[0], outerSlot, outerSlot, 'slotchange event must be dispatched at the slot element first');
	assert_slotchange_log(log[1], innerSlot, outerSlot, 'slotchange event must bubble up from a slot element to its assigned slot');
	assert_slotchange_log(log[2], innerSlotParent, outerSlot, 'slotchange event must bubble up to the parent node of a slot');
	assert_slotchange_log(log[3], innerShadow, outerSlot, 'slotchange event must bubble up to the shadow root');
	assert_slotchange_log(log[4], innerHost, outerSlot,
	'slotchange event must bubble up to the shadow host if the host is a descendent of the tree in which the event was fired');
	assert_slotchange_log(log[5], outerHostParent, outerSlot,
	'slotchange event must bubble up to the parent of an inner shadow host');
	assert_slotchange_log(log[6], outerShadow, outerSlot, 'slotchange event must bubble up to the shadow root');
	assert_equals(log.length, 7, 'slotchange must not bubble beyond the shadow root in which the event was fired');
	}, `A single slotchange event must bubble from a ${connected ? 'connected' : 'disconnected'} ${innerMode}-mode shadow tree to`
	+ `a slot in its parent ${outerMode}-mode shadow tree`);
	}

	test_single_slotchange_event_for_nested_slots('closed', 'closed', false);
	test_single_slotchange_event_for_nested_slots('closed', 'closed', true);
	test_single_slotchange_event_for_nested_slots('closed', 'open', false);
	test_single_slotchange_event_for_nested_slots('closed', 'open', true);

	test_single_slotchange_event_for_nested_slots('open', 'closed', false);
	test_single_slotchange_event_for_nested_slots('open', 'closed', true);
	test_single_slotchange_event_for_nested_slots('open', 'open', false);
	test_single_slotchange_event_for_nested_slots('open', 'open', true);

	function test_slotchange_event_fired_without_listener_on_slot(mode, connected) {
	promise_test(() => {
	const host = document.createElement('div');
	if (connected)
	document.body.appendChild(host);

	const shadowRoot = host.attachShadow({'mode': mode});
	shadowRoot.innerHTML = '<div><slot></slot></div>';
	const container = shadowRoot.querySelector('div');
	const slot = shadowRoot.querySelector('slot');

	const observer = create_slotchange_observer();
	observer.observe(container);
	observer.observe(shadowRoot);
	observer.observe(host);
	observer.observe(document);
	observer.observe(window);

	shadowRoot.appendChild(container);
	host.appendChild(document.createElement('span'));
	host.appendChild(document.createElement('b'));

	assert_array_equals(observer.takeLog(), [], 'slotchange event must not be fired synchronously');
	return Promise.resolve().then(() => {
	const log = observer.takeLog();

	const events = new Set(log.map((entry) => entry.event));
	assert_equals(events.size, 1, 'Mutating the assigned content of a slot must fire exactly one slotchange event');

	assert_slotchange_log(log[0], container, slot, 'slotchange event must bubble up to the parent node of the slot');
	assert_slotchange_log(log[1], shadowRoot, slot, 'slotchange event must bubble up to the shadow root');
	assert_equals(log.length, 2, 'slotchange must not bubble beyond the shadow root');
	});
	}, `slotchange event must be fired in a ${connected ? 'connected' : 'disconnected'} ${mode}-mode shadow tree`
	+ ` even when the slot element itself lacks a event listener.`);
	}

	test_slotchange_event_fired_without_listener_on_slot('closed', false);
	test_slotchange_event_fired_without_listener_on_slot('closed', true);
	test_slotchange_event_fired_without_listener_on_slot('open', false);
	test_slotchange_event_fired_without_listener_on_slot('open', true);

	</script>
	</body>
	</html>