diff options
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/slots-fallback.html')
| -rw-r--r-- | testing/web-platform/tests/shadow-dom/slots-fallback.html | 221 |
1 files changed, 221 insertions, 0 deletions
diff --git a/testing/web-platform/tests/shadow-dom/slots-fallback.html b/testing/web-platform/tests/shadow-dom/slots-fallback.html new file mode 100644 index 000000000..8721fe920 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/slots-fallback.html @@ -0,0 +1,221 @@ +<!DOCTYPE html> +<title>Shadow DOM: Slots and fallback contents</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="host"> + <template data-mode="open"> + <slot id="s1" name="slot1"> + <div id="f1"></div> + </slot> + </template> + </div> +</div> + +<script> +test(() => { + let n = createTestTree(test1); + removeWhiteSpaceOnlyTextNodes(n.test1); + + assert_equals(n.f1.assignedSlot, null); + + assert_array_equals(n.s1.assignedNodes(), []); + assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.f1]); +}, 'Slots fallback: Basic.'); +</script> + +<div id="test2"> + <div id="host"> + <template data-mode="open"> + <slot id="s1" name="slot1"> + <slot id="s2" name="slot2"> + <div id="f1"></div> + </slot> + </slot> + </template> + </div> +</div> + +<script> +test(() => { + let n = createTestTree(test2); + removeWhiteSpaceOnlyTextNodes(n.test2); + + assert_equals(n.f1.assignedSlot, null); + + assert_array_equals(n.s1.assignedNodes(), []); + assert_array_equals(n.s2.assignedNodes(), []); + + assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.f1]); + assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.f1]); +}, 'Slots fallback: Slots in Slots.'); +</script> + +<div id="test3"> + <div id="host"> + <template data-mode="open"> + <slot id="s1" name="slot1"> + <slot id="s2" name="slot2"> + <div id="f1"></div> + </slot> + </slot> + </template> + <div id="c1" slot="slot1"></div> + </div> +</div> + +<script> +test(() => { + let n = createTestTree(test3); + removeWhiteSpaceOnlyTextNodes(n.test3); + + assert_equals(n.c1.assignedSlot, n.s1); + assert_equals(n.f1.assignedSlot, null); + + assert_array_equals(n.s1.assignedNodes(), [n.c1]); + assert_array_equals(n.s2.assignedNodes(), []); + + assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]); + assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.f1]); +}, 'Slots fallback: Fallback contents should not be used if a node is assigned.'); +</script> + +<div id="test4"> + <div id="host"> + <template data-mode="open"> + <slot id="s1" name="slot1"> + <slot id="s2" name="slot2"> + <div id="f1"></div> + </slot> + </slot> + </template> + <div id="c1" slot="slot2"></div> + </div> +</div> + +<script> +test(() => { + let n = createTestTree(test4); + removeWhiteSpaceOnlyTextNodes(n.test4); + + assert_equals(n.c1.assignedSlot, n.s2); + assert_equals(n.f1.assignedSlot, null); + + assert_array_equals(n.s1.assignedNodes(), []); + assert_array_equals(n.s2.assignedNodes(), [n.c1]); + + assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]); + assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]); +}, 'Slots fallback: Slots in Slots: Assinged nodes should be used as fallback contents of another slot'); +</script> + +<div id="test5"> + <div id="host1"> + <template data-mode="open"> + <div id="host2"> + <template data-mode="open"> + <slot id="s4" name="slot4"> + <slot id="s3" name="slot3"> + <div id="f3"></div> + </slot> + <div id="f4"></div> + </slot> + </template> + <slot id="s2" name="slot2" slot="slot3"> + <slot id="s1" name="slot1"> + <div id="f1"></div> + </slot> + <div id="f2"></div> + </slot> + </div> + </template> + <div id="c1" slot="slot1"></div> + </div> +</div> + +<script> +test(() => { + let n = createTestTree(test5); + removeWhiteSpaceOnlyTextNodes(n.test5); + + assert_array_equals(n.s1.assignedNodes(), [n.c1]); + assert_array_equals(n.s2.assignedNodes(), []); + assert_array_equals(n.s3.assignedNodes(), [n.s2]); + assert_array_equals(n.s4.assignedNodes(), []); + + assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]); + assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1, n.f2]); + assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c1, n.f2]); + assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.c1, n.f2, n.f4]); +}, 'Slots fallback: Complex case.'); + +test(() => { + let n = createTestTree(test5); + removeWhiteSpaceOnlyTextNodes(n.test5); + + let d1 = document.createElement('div'); + n.s2.appendChild(d1); + + assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]); + assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1, n.f2, d1]); + assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c1, n.f2, d1]); + assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.c1, n.f2, d1, n.f4]); +}, 'Slots fallback: Mutation. Append fallback contents.'); + +test(() => { + let n = createTestTree(test5); + removeWhiteSpaceOnlyTextNodes(n.test5); + + n.f2.remove(); + + assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]); + assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]); + assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c1]); + assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.c1, n.f4]); +}, 'Slots fallback: Mutation. Remove fallback contents.'); + +test(() => { + let n = createTestTree(test5); + removeWhiteSpaceOnlyTextNodes(n.test5); + + let d2 = document.createElement('div'); + d2.setAttribute('slot', 'slot2'); + n.host1.appendChild(d2); + + assert_array_equals(n.s2.assignedNodes(), [d2]); + assert_array_equals(n.s2.assignedNodes({ flatten: true }), [d2]); + assert_array_equals(n.s3.assignedNodes({ flatten: true }), [d2]); + assert_array_equals(n.s4.assignedNodes({ flatten: true }), [d2, n.f4]); +}, 'Slots fallback: Mutation. Assign a node to a slot so that fallback contens are no longer used.'); + +test(() => { + let n = createTestTree(test5); + removeWhiteSpaceOnlyTextNodes(n.test5); + + n.c1.remove(); + + assert_array_equals(n.s1.assignedNodes(), []); + + assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.f1]); + assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.f1, n.f2]); + assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.f1, n.f2]); + assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.f1, n.f2, n.f4]); +}, 'Slots fallback: Mutation. Remove an assigned node from a slot so that fallback contens will be used.'); + +test(() => { + let n = createTestTree(test5); + removeWhiteSpaceOnlyTextNodes(n.test5); + + n.s1.remove(); + + assert_array_equals(n.s1.assignedNodes(), []); + + assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.f1]); + assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.f2]); + assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.f2]); + assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.f2, n.f4]); +}, 'Slots fallback: Mutation. Remove a slot which is a fallback content of another slot.'); +</script> |