shadow-dom/slots-fallback.html

<!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.');

test(() => {
  let n = createTestTree(test1);

  assert_array_equals(n.s1.assignedElements(), []);
  assert_array_equals(n.s1.assignedElements({ flatten: true }), [n.f1]);
}, 'Slots fallback: Basic, elements only.');
</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.');

test(() => {
  let n = createTestTree(test2);

  assert_array_equals(n.s1.assignedElements(), []);
  assert_array_equals(n.s2.assignedElements(), []);

  assert_array_equals(n.s1.assignedElements({ flatten: true }), [n.f1]);
  assert_array_equals(n.s2.assignedElements({ flatten: true }), [n.f1]);
}, 'Slots fallback: Slots in Slots, elements only.');
</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: Assigned 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);

  assert_array_equals(n.s1.assignedElements(), [n.c1]);
  assert_array_equals(n.s2.assignedElements(), []);
  assert_array_equals(n.s3.assignedElements(), [n.s2]);
  assert_array_equals(n.s4.assignedElements(), []);

  assert_array_equals(n.s1.assignedElements({ flatten: true }), [n.c1]);
  assert_array_equals(n.s2.assignedElements({ flatten: true }), [n.c1, n.f2]);
  assert_array_equals(n.s3.assignedElements({ flatten: true }), [n.c1, n.f2]);
  assert_array_equals(n.s4.assignedElements({ flatten: true }), [n.c1, n.f2, n.f4]);
}, 'Slots fallback: Complex case, elements only.');

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 }), [],
                      'fall back contents should be empty because s1 is not in a shadow tree.');
  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>