| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| |
| <div id="test1"> |
| <div id="host1"> |
| <template id="shadowroot" data-mode="open" data-slotting="manual"> |
| <slot id="s1" name="slot1"></slot> |
| <slot id="s2" name="slot2"></slot> |
| </template> |
| <div id="c1"></div> |
| <div id="c2"></div> |
| </div> |
| </div> |
| |
| <script> |
| function doneIfSlotChange(slots, test) { |
| let fired = new Set(); |
| for (let slot of slots) { |
| slot.addEventListener('slotchange', test.step_func((e) => { |
| assert_false(fired.has(slot.id)); |
| fired.add(slot.id); |
| if (fired.size == slots.length) { |
| test.done(); |
| } |
| })) |
| } |
| } |
| |
| async_test((test) => { |
| let n = createTestTree(test1); |
| assert_array_equals(n.s2.assignedNodes(), []); |
| n.s2.assign([n.c2]); |
| assert_array_equals(n.s2.assignedNodes(), [n.c2]); |
| |
| setTimeout(function () { |
| doneIfSlotChange([n.s1,n.s2], test); |
| |
| assert_array_equals(n.s2.assignedNodes(), [n.c2]); |
| n.s1.assign([n.c2]); |
| assert_array_equals(n.s2.assignedNodes(), []); |
| },1); |
| }, 'slotchange event: assign a child to a host.'); |
| |
| async_test((test) => { |
| let n = createTestTree(test1); |
| assert_array_equals(n.s1.assignedNodes(), []); |
| let d1 = document.createElement('div'); |
| n.s1.assign([d1]); |
| assert_array_equals(n.s1.assignedNodes(), []); |
| |
| setTimeout(function () { |
| doneIfSlotChange([n.s1], test); |
| n.host1.appendChild(d1); |
| },1); |
| }, 'slotchange event: Append a child to a host.'); |
| |
| async_test((test) => { |
| let n = createTestTree(test1); |
| assert_array_equals(n.s1.assignedNodes(), []); |
| n.s1.assign([n.c1]); |
| assert_array_equals(n.s1.assignedNodes(), [n.c1]); |
| |
| setTimeout(function () { |
| doneIfSlotChange([n.s1], test); |
| n.c1.remove(); |
| },1); |
| }, 'slotchange event: Remove a child to a host.'); |
| |
| async_test((test) => { |
| let n = createTestTree(test1); |
| n.s1.assign([n.c1]); |
| n.s2.assign([n.c1]); |
| |
| setTimeout(function () { |
| doneIfSlotChange([n.s2], test); |
| n.s1.remove(); |
| },1); |
| }, 'slotchange event: Remove a slot from a shadow tree.'); |
| |
| async_test((test) => { |
| let n = createTestTree(test1); |
| n.s1.assign([n.c1]); |
| let slot = document.createElement('slot'); |
| slot.assign([n.c1]) |
| assert_array_equals(slot.assignedNodes(), []); |
| |
| setTimeout(function () { |
| doneIfSlotChange([slot,n.s1], test); |
| n.shadowroot.insertBefore(slot, n.s1); |
| assert_array_equals(n.s1.assignedNodes(), []); |
| },1); |
| }, 'slotchange event: Insert a slot before another slot.'); |
| </script> |
