summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/shadow-dom/slotchange.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/shadow-dom/slotchange.html
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/slotchange.html')
-rw-r--r--testing/web-platform/tests/shadow-dom/slotchange.html305
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
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-19 16:05:13 +0000