| Index: third_party/WebKit/LayoutTests/shadow-dom/slots-fallback.html
|
| diff --git a/third_party/WebKit/LayoutTests/shadow-dom/slots-fallback.html b/third_party/WebKit/LayoutTests/shadow-dom/slots-fallback.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..3f085ecb1e3da77070efaa6f5dbc8d448158e237
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/shadow-dom/slots-fallback.html
|
| @@ -0,0 +1,219 @@
|
| +<!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="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>
|
|
|