| <!DOCTYPE html> |
| <title>Shadow DOM: Imperative Slot API slotchange event</title> |
| <meta name="author" title="Yu Han" href="mailto:yuzhehan@chromium.org"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <link rel="help" href="https://dom.spec.whatwg.org/#signaling-slot-change"> |
| <script src="resources/shadow-dom.js"></script> |
| |
| <div id="test_slotchange"> |
| <div id="host"> |
| <template id="shadow_root" data-mode="open" data-slot-assignment="manual"> |
| <slot id="s1"><div id="fb">fallback</div></slot> |
| <slot id="s2"></slot> |
| <div> |
| <slot id="s2.5"></slot> |
| </div> |
| <slot id="s3"></slot> |
| </template> |
| <div id="c1"></div> |
| <div id="c2"></div> |
| </div> |
| <div id="c4"></div> |
| </div> |
| |
| <script> |
| function getDataCollection() { |
| return { |
| s1EventCount: 0, |
| s2EventCount: 0, |
| s3EventCount: 0, |
| s1ResolveFn: null, |
| s2ResolveFn: null, |
| s3ResolveFn: null, |
| } |
| } |
| |
| function setupShadowDOM(id, test, data) { |
| let tTree = createTestTree(id); |
| tTree.s1.addEventListener('slotchange', (event) => { |
| if (!event.isFakeEvent) { |
| test.step(function () { |
| assert_equals(event.type, 'slotchange', 'slotchange event\'s type must be "slotchange"'); |
| assert_equals(event.target, tTree.s1, 'slotchange event\'s target must be the slot element'); |
| assert_equals(event.relatedTarget, undefined, 'slotchange must not set relatedTarget'); |
| }); |
| data.s1EventCount++; |
| } |
| data.s1ResolveFn(); |
| }); |
| tTree.s2.addEventListener('slotchange', (event) => { |
| if (!event.isFakeEvent) { |
| test.step(function () { |
| assert_equals(event.type, 'slotchange', 'slotchange event\'s type must be "slotchange"'); |
| assert_equals(event.target, tTree.s2, 'slotchange event\'s target must be the slot element'); |
| assert_equals(event.relatedTarget, undefined, 'slotchange must not set relatedTarget'); |
| }); |
| data.s2EventCount++; |
| } |
| data.s2ResolveFn(); |
| }); |
| tTree.s3.addEventListener('slotchange', (event) => { |
| if (!event.isFakeEvent) { |
| test.step(function () { |
| assert_equals(event.type, 'slotchange', 'slotchange event\'s type must be "slotchange"'); |
| // listen to bubbling events. |
| assert_equals(event.relatedTarget, undefined, 'slotchange must not set relatedTarget'); |
| }); |
| data.s3EventCount++; |
| } |
| data.s3ResolveFn(); |
| }); |
| return tTree; |
| } |
| |
| function monitorSlots(data) { |
| const s1Promise = new Promise((resolve, reject) => { |
| data.s1ResolveFn = resolve; |
| }); |
| const s2Promise = new Promise((resolve, reject) => { |
| data.s2ResolveFn = resolve; |
| }); |
| const s3Promise = new Promise((resolve, reject) => { |
| data.s3ResolveFn = resolve; |
| }); |
| return [s1Promise, s2Promise, s3Promise]; |
| } |
| </script> |
| |
| <script> |
| // Tests: |
| async_test((test) => { |
| const data = getDataCollection(); |
| let tTree = setupShadowDOM(test_slotchange, test, data); |
| let [s1Promise, s2Promise] = monitorSlots(data); |
| |
| tTree.s1.assign(tTree.c1); |
| tTree.s2.assign(tTree.c2); |
| |
| assert_equals(data.s1EventCount, 0, 'slotchange event must not be fired synchronously'); |
| assert_equals(data.s2EventCount, 0); |
| |
| Promise.all([s1Promise, s2Promise]).then(test.step_func_done(() => { |
| assert_equals(data.s1EventCount, 1); |
| assert_equals(data.s2EventCount, 1); |
| })); |
| }, 'slotchange event must not fire synchronously.'); |
| |
| async_test((test) => { |
| const data = getDataCollection(); |
| let tTree = setupShadowDOM(test_slotchange, test, data); |
| let [s1Promise, s2Promise] = monitorSlots(data); |
| |
| tTree.s1.assign();; |
| tTree.s2.assign(); |
| tTree.host.insertBefore(tTree.c4, tTree.c1); |
| |
| Promise.all([s1Promise, s2Promise]).then(test.step_func_done(() => { |
| assert_equals(data.s1EventCount, 0); |
| assert_equals(data.s2EventCount, 0); |
| })); |
| |
| // use fake event to trigger event handler. |
| let fakeEvent = new Event('slotchange'); |
| fakeEvent.isFakeEvent = true; |
| tTree.s1.dispatchEvent(fakeEvent); |
| tTree.s2.dispatchEvent(fakeEvent); |
| }, 'slotchange event should not fire when assignments do not change assignedNodes.'); |
| |
| async_test((test) => { |
| const data = getDataCollection(); |
| let tTree = setupShadowDOM(test_slotchange,test, data); |
| let [s1Promise] = monitorSlots(data); |
| |
| tTree.s1.assign(tTree.c1, tTree.c2); |
| |
| s1Promise.then(test.step_func(() => { |
| assert_equals(data.s1EventCount, 1); |
| |
| [s1Promise] = monitorSlots(data); |
| tTree.s1.assign(tTree.c1, tTree.c2); |
| tTree.s1.assign(tTree.c1, tTree.c2, tTree.c1, tTree.c2, tTree.c2); |
| |
| s1Promise.then(test.step_func_done(() => { |
| assert_equals(data.s1EventCount, 1); |
| })); |
| |
| let fakeEvent = new Event('slotchange'); |
| fakeEvent.isFakeEvent = true; |
| tTree.s1.dispatchEvent(fakeEvent); |
| })); |
| |
| }, 'slotchange event should not fire when same node is assigned.'); |
| |
| async_test((test) => { |
| const data = getDataCollection(); |
| let tTree = setupShadowDOM(test_slotchange, test, data); |
| let [s1Promise, s2Promise] = monitorSlots(data); |
| |
| tTree.s1.assign(tTree.c1); |
| tTree.s2.assign(tTree.c2); |
| |
| Promise.all([s1Promise, s2Promise]).then(test.step_func_done(() => { |
| assert_equals(data.s1EventCount, 1); |
| assert_equals(data.s2EventCount, 1); |
| })); |
| }, "Fire slotchange event when slot's assigned nodes changes."); |
| |
| async_test((test) => { |
| const data = getDataCollection(); |
| let tTree = setupShadowDOM(test_slotchange, test, data); |
| let [s1Promise, s2Promise] = monitorSlots(data); |
| |
| tTree.s1.assign(tTree.c1); |
| |
| s1Promise.then(test.step_func(() => { |
| assert_equals(data.s1EventCount, 1); |
| |
| [s1Promise, s2Promise] = monitorSlots(data); |
| tTree.s2.assign(tTree.c1); |
| |
| Promise.all([s1Promise, s2Promise]).then(test.step_func_done(() => { |
| assert_equals(data.s1EventCount, 2); |
| assert_equals(data.s2EventCount, 1); |
| })); |
| })); |
| }, "Fire slotchange event on previous slot and new slot when node is reassigned."); |
| |
| async_test((test) => { |
| const data = getDataCollection(); |
| let tTree = setupShadowDOM(test_slotchange, test, data); |
| let [s1Promise] = monitorSlots(data); |
| |
| tTree.s1.assign(tTree.c1); |
| |
| s1Promise.then(test.step_func(() => { |
| assert_equals(data.s1EventCount, 1); |
| |
| [s1Promise] = monitorSlots(data); |
| tTree.s1.assign(); |
| |
| s1Promise.then(test.step_func_done(() => { |
| assert_equals(data.s1EventCount, 2); |
| })); |
| })); |
| }, "Fire slotchange event on node assignment and when assigned node is removed."); |
| |
| async_test((test) => { |
| const data = getDataCollection(); |
| let tTree = setupShadowDOM(test_slotchange, test, data); |
| let [s1Promise] = monitorSlots(data); |
| |
| tTree.s1.assign(tTree.c1, tTree.c2); |
| |
| s1Promise.then(test.step_func(() => { |
| assert_equals(data.s1EventCount, 1); |
| |
| [s1Promise] = monitorSlots(data); |
| tTree.s1.assign(tTree.c2, tTree.c1); |
| |
| s1Promise.then(test.step_func_done(() => { |
| assert_equals(data.s1EventCount, 2); |
| })); |
| })); |
| }, "Fire slotchange event when order of assigned nodes changes."); |
| |
| promise_test((test) => { |
| const data = getDataCollection(); |
| let tTree = setupShadowDOM(test_slotchange, test, data); |
| let [s1Promise] = monitorSlots(data); |
| |
| tTree.s1.assign(tTree.c1); |
| |
| return s1Promise.then(test.step_func(() => { |
| assert_equals(data.s1EventCount, 1); |
| |
| [s1Promise] = monitorSlots(data); |
| tTree.c1.remove(); |
| |
| return s1Promise; |
| })) |
| .then(test.step_func(() => { |
| assert_equals(data.s1EventCount, 2); |
| })); |
| }, "Fire slotchange event when assigned node is removed."); |
| |
| promise_test((test) => { |
| const data = getDataCollection(); |
| let tTree = setupShadowDOM(test_slotchange, test, data); |
| [s1Promise] = monitorSlots(data); |
| |
| tTree.s1.assign(tTree.c1); |
| |
| return s1Promise.then(test.step_func(() => { |
| assert_equals(data.s1EventCount, 1); |
| |
| [s1Promise] = monitorSlots(data); |
| tTree.s1.remove(); |
| |
| return s1Promise; |
| })) |
| .then(test.step_func(() => { |
| assert_equals(data.s1EventCount, 2); |
| })); |
| }, "Fire slotchange event when removing a slot from Shadows Root that changes its assigned nodes."); |
| |
| async_test((test) => { |
| const data = getDataCollection(); |
| let tTree = setupShadowDOM(test_slotchange, test, data); |
| let [s1Promise] = monitorSlots(data); |
| |
| tTree.s1.remove(); |
| |
| let fakeEvent = new Event('slotchange'); |
| fakeEvent.isFakeEvent = true; |
| tTree.s1.dispatchEvent(fakeEvent); |
| |
| s1Promise.then(test.step_func(() => { |
| assert_equals(data.s2EventCount, 0); |
| |
| [s1Promise, s2Promise] = monitorSlots(data); |
| tTree.shadow_root.insertBefore(tTree.s1, tTree.s2); |
| |
| tTree.s1.dispatchEvent(fakeEvent); |
| tTree.s2.dispatchEvent(fakeEvent); |
| |
| Promise.all([s1Promise, s2Promise]).then(test.step_func_done(() => { |
| assert_equals(data.s1EventCount, 0); |
| assert_equals(data.s2EventCount, 0); |
| })); |
| })); |
| |
| }, "No slotchange event when adding or removing an empty slot."); |
| |
| async_test((test) => { |
| const data = getDataCollection(); |
| let tTree = setupShadowDOM(test_slotchange, test, data); |
| let [s1Promise, s2Promise] = monitorSlots(data); |
| |
| tTree.host.appendChild(document.createElement("div")); |
| |
| let fakeEvent = new Event('slotchange'); |
| fakeEvent.isFakeEvent = true; |
| tTree.s1.dispatchEvent(fakeEvent); |
| tTree.s2.dispatchEvent(fakeEvent); |
| |
| Promise.all([s1Promise, s2Promise]).then(test.step_func(() => { |
| assert_equals(data.s1EventCount, 0); |
| assert_equals(data.s2EventCount, 0); |
| |
| [s1Promise, s2Promise] = monitorSlots(data); |
| tTree.shadow_root.insertBefore(document.createElement("div"), tTree.s2); |
| |
| tTree.s1.dispatchEvent(fakeEvent); |
| tTree.s2.dispatchEvent(fakeEvent); |
| |
| Promise.all([s1Promise, s2Promise]).then(test.step_func_done(() => { |
| assert_equals(data.s1EventCount, 0); |
| assert_equals(data.s2EventCount, 0); |
| })); |
| })); |
| |
| }, "No slotchange event when adding another slotable."); |
| |
| </script> |
| |
| <div id="test_nested_slotchange"> |
| <div> |
| <template data-mode="open" data-slot-assignment="manual"> |
| <div> |
| <template data-mode="open" data-slot-assignment="manual"> |
| <slot id="s2"></slot> |
| <slot id="s3"></slot> |
| </template> |
| <slot id="s1"></slot> |
| </div> |
| </template> |
| <div id="c1"></div> |
| </div> |
| </div> |
| |
| <script> |
| async_test((test) => { |
| const data = getDataCollection(); |
| let tTree = setupShadowDOM(test_nested_slotchange, test, data); |
| let [s1Promise, s2Promise, s3Promise] = monitorSlots(data); |
| |
| tTree.s3.assign(tTree.s1); |
| |
| s3Promise.then(test.step_func(() => { |
| assert_equals(data.s3EventCount, 1); |
| [s1Promise, s2Promise, s3Promise] = monitorSlots(data); |
| |
| tTree.s1.assign(tTree.c1); |
| |
| Promise.all([s1Promise, s3Promise]).then(test.step_func_done(() => { |
| assert_equals(data.s1EventCount, 1); |
| assert_equals(data.s3EventCount, 2); |
| })); |
| })); |
| }, "Fire slotchange event when assign node to nested slot, ensure event bubbles ups."); |
| |
| promise_test(async t => { |
| async function mutationObserversRun() { |
| return new Promise(r => { |
| t.step_timeout(r, 0); |
| }); |
| } |
| let tTree = createTestTree(test_slotchange); |
| |
| tTree.s1.assign(tTree.c1); |
| tTree["s2.5"].assign(tTree.c2); |
| |
| let slotChangedOrder = []; |
| |
| // Clears out pending mutation observers |
| await mutationObserversRun(); |
| |
| tTree.s1.addEventListener("slotchange", function() { |
| slotChangedOrder.push("s1"); |
| }); |
| |
| tTree.s3.addEventListener("slotchange", function() { |
| slotChangedOrder.push("s3"); |
| }); |
| |
| tTree["s2.5"].addEventListener("slotchange", function() { |
| slotChangedOrder.push("s2.5"); |
| }); |
| |
| tTree.s3.assign(tTree.c2, tTree.c1); |
| await mutationObserversRun(); |
| assert_array_equals(slotChangedOrder, ["s1", "s2.5", "s3"]); |
| }, 'Signal a slot change should be done in tree order.'); |
| </script> |
