diff options
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/slotchange.html')
| -rw-r--r-- | testing/web-platform/tests/shadow-dom/slotchange.html | 305 |
1 files changed, 305 insertions, 0 deletions
diff --git a/testing/web-platform/tests/shadow-dom/slotchange.html b/testing/web-platform/tests/shadow-dom/slotchange.html new file mode 100644 index 0000000000..9c4b81a156 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/slotchange.html @@ -0,0 +1,305 @@ +<!DOCTYPE html> +<title>Shadow DOM: slotchange Events</title> +<meta name="author" title="Hayato Ito" href="mailto:hayato@google.com"> +<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 data-mode="open"> + <slot id="s1" name="slot1"></slot> + </template> + <div id="c1" slot="slot1"></div> + </div> +</div> + +<script> +function arraysEqual(a, b) { + if (a === b) return true; + if (a == null || b == null) return false; + if (a.length !== b.length) return false; + for (var i = 0; i < a.length; ++i) { + if (a[i] !== b[i]) return false; + } + return true; +} +function doneIfSlotChange(slots, expectedAssignedNodes, test) { + let matched = Array(slots.length).fill(false); + for (let i=0; i<slots.length; i++) { + slots[i].addEventListener('slotchange', test.step_func((e) => { + matched[i] = arraysEqual(slots[i].assignedNodes(), expectedAssignedNodes[i]); + if (matched.every(v => v)) { + test.done(); + } + })) + } +} + +async_test((test) => { + let n = createTestTree(test1); + removeWhiteSpaceOnlyTextNodes(n.test1); + + let d1 = document.createElement('div'); + d1.setAttribute('slot', 'slot1'); + + doneIfSlotChange([n.s1], [[n.c1, d1]], test); + + n.host1.appendChild(d1); +}, 'slotchange event: Append a child to a host.'); + +async_test((test) => { + let n = createTestTree(test1); + removeWhiteSpaceOnlyTextNodes(n.test1); + + doneIfSlotChange([n.s1], [[]], test); + + n.c1.remove(); +}, 'slotchange event: Remove a child from a host.'); + +async_test((test) => { + let n = createTestTree(test1); + removeWhiteSpaceOnlyTextNodes(n.test1); + + n.c1.remove(); + + doneIfSlotChange([n.s1], [[]], test); +}, 'slotchange event: Remove a child before adding an event listener.'); + +async_test((test) => { + let n = createTestTree(test1); + removeWhiteSpaceOnlyTextNodes(n.test1); + + doneIfSlotChange([n.s1], [[]], test); + + n.c1.setAttribute('slot', 'slot-none'); +}, 'slotchange event: Change slot= attribute to make it un-assigned.'); + +async_test((test) => { + let n = createTestTree(test1); + removeWhiteSpaceOnlyTextNodes(n.test1); + + doneIfSlotChange([n.s1], [[]], test); + + n.s1.setAttribute('name', 'slot-none'); +}, 'slotchange event: Change slot\'s name= attribute so that none is assigned.'); +</script> + +<div id="test2"> + <div id="host1"> + <template data-mode="open"> + <slot id="s1" name="slot1"></slot> + </template> + <div id="c2" slot="slot2"></div> + </div> +</div> + +<script> +async_test((test) => { + let n = createTestTree(test2); + removeWhiteSpaceOnlyTextNodes(n.test2); + + doneIfSlotChange([n.s1], [[n.c2]], test); + + n.c2.setAttribute('slot', 'slot1'); +}, 'slotchange event: Change slot= attribute to make it assigned.'); + +async_test((test) => { + let n = createTestTree(test2); + removeWhiteSpaceOnlyTextNodes(n.test2); + + doneIfSlotChange([n.s1], [[n.c2]], test); + + n.s1.setAttribute('name', 'slot2'); +}, 'slotchange event: Change slot\'s name= attribute so that a node is assigned to the slot.'); +</script> + +<div id="test_fallback"> + <div id="host1"> + <template data-mode="open"> + <slot id="s1"></slot> + </template> + </div> +</div> + +<script> +async_test((test) => { + let n = createTestTree(test_fallback); + removeWhiteSpaceOnlyTextNodes(n.test_fallback); + + doneIfSlotChange([n.s1], [[]], test); + + n.s1.appendChild(document.createElement('div')); +}, 'slotchange event: Change fallback content - assignedNodes still empty.'); +</script> + +<div id="test_fallback2"> + <div id="host1"> + <template data-mode="open"> + <slot id="s1"> + <div id="f1"></div> + </slot> + </template> + </div> +</div> + +<script> +async_test((test) => { + let n = createTestTree(test_fallback2); + removeWhiteSpaceOnlyTextNodes(n.test_fallback2); + + doneIfSlotChange([n.s1], [[]], test); + + n.f1.remove(); +}, 'slotchange event: Remove a fallback content - assignedNodes still empty.'); +</script> + +<div id="test_fallback3"> + <div id="host1"> + <template data-mode="open"> + <slot id="s2"> + <slot id="s1"> + <div id="f1"></div> + </slot> + </slot> + </template> + </div> +</div> + +<script> +async_test((test) => { + let n = createTestTree(test_fallback3); + removeWhiteSpaceOnlyTextNodes(n.test_fallback3); + + doneIfSlotChange([n.s1, n.s2], [[],[]], test); + + n.s1.appendChild(document.createElement('div')); +}, 'slotchange event: Add a fallback content to nested slots - assignedNodes still empty.'); + +async_test((test) => { + let n = createTestTree(test_fallback3); + removeWhiteSpaceOnlyTextNodes(n.test_fallback3); + + doneIfSlotChange([n.s1, n.s2], [[],[]], test); + + n.f1.remove(); +}, 'slotchange event: Remove a fallback content from nested slots - assignedNodes still empty.'); +</script> + +<div id="test3"> + <div id="host1"> + <template id="shadowroot" data-mode="open"> + <slot id="s1" name="slot1"></slot> + </template> + <div id="c1" slot="slot1"></div> + </div> +</div> + +<script> +async_test((test) => { + let n = createTestTree(test3); + removeWhiteSpaceOnlyTextNodes(n.test3); + + doneIfSlotChange([n.s1], [[]], test); + + let slot = document.createElement('slot'); + slot.setAttribute('name', 'slot1'); + n.shadowroot.insertBefore(slot, n.s1); +}, "slotchange event: Insert a slot before an existing slot."); +</script> + +<div id="test4"> + <div id="host1"> + <template id="shadowroot" data-mode="open"> + <slot id="s1" name="slot1"></slot> + <slot id="s2" name="slot1"></slot> + </template> + <div id="c1" slot="slot1"></div> + </div> +</div> + +<script> +async_test((test) => { + let n = createTestTree(test4); + removeWhiteSpaceOnlyTextNodes(n.test4); + + doneIfSlotChange([n.s2], [[n.c1]], test); + + n.s1.remove(); +}, "slotchange event: Remove a preceding slot."); +</script> + +<div id="test5"> + <div id="host1"> + <template data-mode="open"> + <div id="host2"> + <template data-mode="open"> + <slot id="s2" name="slot2"></slot> + </template> + <slot id="s1" name="slot1" slot="slot2"></slot> + </div> + </template> + <div id="c1" slot="slot1"></div> + </div> +</div> + +<script> +async_test((test) => { + let n = createTestTree(test5); + removeWhiteSpaceOnlyTextNodes(n.test5); + + doneIfSlotChange([n.s1, n.s2], [[],[n.s1]], test); + + n.c1.remove(); +}, "slotchange event: A slot is assigned to another slot."); +</script> + +<div id="test6"> + <div id="host1"> + <template data-mode="open"> + <div id="host2"> + <template data-mode="open"> + <slot id="s2" name="slot2"></slot> + </template> + <slot id="s1" name="slot1" slot="slot2"></slot> + </div> + </template> + </div> +</div> + +<script> +async_test((test) => { + let n = createTestTree(test6); + removeWhiteSpaceOnlyTextNodes(n.test6); + + doneIfSlotChange([n.s2], [[]], test); + + n.s1.remove(); +}, "slotchange event: Slotchange should be fired if assigned nodes are changed."); +</script> + +<div id="test7"> + <div id="host1"> + <template data-mode="open"> + <div id="host2"> + <template data-mode="open"> + <slot id="s2" name="slot2"></slot> + </template> + <slot id="s1" name="slot1" slot="slot2"></slot> + </div> + </template> + </div> +</div> + +<script> +async_test((test) => { + let n = createTestTree(test7); + removeWhiteSpaceOnlyTextNodes(n.test7); + + let d1 = document.createElement('div'); + d1.setAttribute('slot', 'slot1'); + doneIfSlotChange([n.s1, n.s2], [[d1],[n.s1]], test); + + n.host1.appendChild(d1); +}, "slotchange event: Child content is added to nested slots."); +</script>
\ No newline at end of file |