<!DOCTYPE html>
<script src='../resources/testharness.js'></script>
<script src='../resources/testharnessreport.js'></script>
<script src='resources/shadow-dom.js'></script>
<div id='host'>
  <template data-mode='open'>
    <slot name='slot1'>
      <div id='fallback1'></div>
    </slot>
    <slot name='slot2'>
      <div id='fallback2'></div>
    </slot>
  </template>
  <div id='child1' slot='slot1'></div>
</div>
<script>
'use strict';
convertTemplatesToShadowRootsWithin(host);
removeWhiteSpaceOnlyTextNodes(host);
document.body.offsetLeft;

const slot1 = host.shadowRoot.querySelector('[name=slot1]');
const slot2 = host.shadowRoot.querySelector('[name=slot2]');
const fallback1 = host.shadowRoot.querySelector('#fallback1');
const fallback2 = host.shadowRoot.querySelector('#fallback2');

test(() => {
  assert_array_equals(slot1.assignedNodes({flatten: true}), [child1]);
  assert_array_equals(slot2.assignedNodes({flatten: true}), [fallback2]);
}, "Slot's distributed nodes");

test(() => {
  // Insert
  const slot0 = document.createElement('slot');
  slot0.setAttribute('name', 'slot1');
  host.shadowRoot.insertBefore(slot0, slot1);

  assert_array_equals(slot0.assignedNodes({flatten: true}), [child1]);
  assert_array_equals(slot1.assignedNodes({flatten: true}), [fallback1]);
  assert_array_equals(slot2.assignedNodes({flatten: true}), [fallback2]);

  // Remove
  host.shadowRoot.removeChild(slot0);
  assert_array_equals(slot1.assignedNodes({flatten: true}), [child1]);
  assert_array_equals(slot2.assignedNodes({flatten: true}), [fallback2]);
}, "Slot's distributed nodes after inserting/removeing a slot.");

test(() => {
  // Attribute change
  slot1.setAttribute('name', 'slot-foo');
  assert_array_equals(slot1.assignedNodes({flatten: true}), [fallback1]);
  assert_array_equals(slot2.assignedNodes({flatten: true}), [fallback2]);

  child1.setAttribute('slot', 'slot-foo');
  assert_array_equals(slot1.assignedNodes({flatten: true}), [child1]);
  assert_array_equals(slot2.assignedNodes({flatten: true}), [fallback2]);
}, "Slot's distributed nodes after the attribute is changed.");
</script>