| <!DOCTYPE html> |
| <!-- |
| Tests for Imperative Shadow DOM Distribution API. |
| See https://crbug.com/869308 |
| --> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| <div id="test1"> |
| <div id="host"></div> |
| <div id="host1"></div> |
| <div id="host2"></div> |
| </div> |
| <script> |
| test(() => { |
| let n = createTestTree(test1); |
| assert_not_equals(n.host.attachShadow({ mode: 'open', slotting: 'manual' }), |
| null, 'slotting manual should work'); |
| assert_not_equals(n.host1.attachShadow({ mode: 'open', slotting: 'auto' }), |
| null, 'slotting auto should work'); |
| assert_throws(new TypeError(), () => { |
| n.host2.attachShadow({ mode: 'open', slotting: 'exceptional' })}, |
| 'others should throw exception'); |
| }, 'attachShadow can take slotting parameter'); |
| |
| </script> |
| <div id="test2"> |
| <div id="host"> |
| <template id="shadow_root" data-mode="open" data-slotting="manual"> |
| <slot id="s1"></slot> |
| <slot id="s2"></slot> |
| <slot id="s3"></slot> |
| </template> |
| <div id="c1"></div> |
| <div id="c2"></div> |
| <div id="c3"></div> |
| </div> |
| <div id="c4"></div> |
| <div id="host4"> |
| <template id="shadow_root1" data-mode="open" data-slotting="manual"> |
| <slot id="s5" name="s5"></slot> |
| </template> |
| </div> |
| </div> |
| <script> |
| test(() => { |
| let n = createTestTree(test2); |
| assert_array_equals(n.s2.assignedElements(), []); |
| assert_equals(n.c1.assignedSlot, null); |
| |
| n.s2.assign([n.c1]); |
| |
| assert_array_equals(n.s2.assignedNodes(), [n.c1]); |
| assert_equals(n.c1.assignedSlot, n.s2); |
| |
| n.s1.assign([n.c2,n.c1]); |
| assert_array_equals(n.s1.assignedNodes(), [n.c1,n.c2]); |
| assert_array_equals(n.s2.assignedNodes(), []); |
| assert_equals(n.c1.assignedSlot, n.s1); |
| assert_equals(n.c2.assignedSlot, n.s1); |
| |
| n.s1.assign([n.c2]); |
| assert_array_equals(n.s1.assignedNodes(), [n.c2]); |
| assert_array_equals(n.s2.assignedNodes(), [n.c1]); |
| }, 'assignedNodes/Slot can be used in manual slotting'); |
| |
| test(() => { |
| let n = createTestTree(test2); |
| n.s1.assign([n.c4]); |
| assert_array_equals(n.s1.assignedNodes(), []); |
| |
| n.host.appendChild(n.c4); |
| assert_array_equals(n.s1.assignedNodes(), [n.c4]); |
| }, 'Nodes should be assigned to slot only when nodes are host\'s children'); |
| |
| test(() => { |
| let n = createTestTree(test2); |
| n.s5.assign([n.c1]); |
| assert_array_equals(n.s5.assignedNodes(), []); |
| |
| n.shadow_root.insertBefore(n.s5,n.s1); |
| assert_array_equals(n.s5.assignedNodes(), [n.c1]); |
| }, 'Nodes should be assigned to a slot only when the slot is in host\'s shadowtree'); |
| |
| test(() => { |
| let n = createTestTree(test2); |
| n.s1.assign([n.c1]); |
| n.s2.assign([n.c1]); |
| assert_array_equals(n.s2.assignedNodes(), []); |
| |
| n.shadow_root.insertBefore(n.s2,n.s1); |
| assert_array_equals(n.s2.assignedNodes(), [n.c1]); |
| }, 'A node should be assigned to a slot when the slot is inserted before the assigned slot'); |
| |
| test(() => { |
| let n = createTestTree(test2); |
| n.s1.assign([n.c1]); |
| n.s2.assign([n.c1]); |
| n.s3.assign([n.c1]); |
| n.shadow_root.insertBefore(n.s2,n.s1); |
| n.shadow_root.insertBefore(n.s3,n.s1); |
| |
| n.s2.remove(); |
| |
| assert_array_equals(n.s1.assignedNodes(), []); |
| assert_array_equals(n.s3.assignedNodes(), [n.c1]); |
| }, 'A slot should be assigned to a node even after the slot is inserted after the assigned slot, and the assigned slot are removed') |
| |
| test(() => { |
| let n = createTestTree(test2); |
| n.s1.assign([n.c1]); |
| assert_array_equals(n.s1.assignedNodes(), [n.c1]); |
| n.shadow_root1.insertBefore(n.s1,n.s5); |
| |
| assert_array_equals(n.s1.assignedNodes(), []); |
| n.s1.assign([]); |
| n.shadow_root.insertBefore(n.s1,n.s2); |
| |
| assert_array_equals(n.s1.assignedNodes(), []); |
| }, 'A slot should not be assigned to a node once after the slot is inserted in another shadow root, and assigned another slot.') |
| |
| test(() => { |
| let n = createTestTree(test2); |
| n.shadow_root.insertBefore(n.s1,n.s2); |
| n.s2.assign([n.c1,n.c1]); |
| assert_array_equals(n.s2.assignedNodes(), [n.c1]); |
| |
| n.s1.assign([n.c1]); |
| assert_array_equals(n.s2.assignedNodes(), []); |
| |
| n.shadow_root1.appendChild(n.s2); |
| assert_array_equals(n.s2.assignedNodes(), []); |
| }, 'Same nodes should be ignored'); |
| |
| test(() => { |
| let n = createTestTree(test2); |
| n.s1.assign([n.c3]); |
| n.s1.assign([n.c3]); |
| |
| n.s1.remove(); |
| |
| assert_equals(n.c3.assignedSlot, null); |
| }, 'Same assignment should be ignored'); |
| |
| </script> |
| <div id="test3"> |
| <div id="host1"> |
| <template id="shadow_root" data-mode="open"> |
| <slot id="s1" name="s1"></slot> |
| </template> |
| <div id="c1" slot="s1"></div> |
| </div> |
| </div> |
| <script> |
| test(() => { |
| let n = createTestTree(test3); |
| assert_array_equals(n.s1.assignedElements(), [n.c1]); |
| assert_equals(n.c1.assignedSlot, n.s1); |
| |
| n.s1.assign([]); |
| assert_array_equals(n.s1.assignedElements(), [n.c1]); |
| assert_equals(n.c1.assignedSlot, n.s1); |
| }, 'Slotting API should not have any effect in auto mode'); |
| |
| </script> |
