<!DOCTYPE html>
<meta charset="utf-8" >
<meta name="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
<meta name="assert" content="Imperatively assigned node overwrites fallback contents, when dynamically created.">
<title>Shadow DOM: Slots and fallback contents</title>
<link rel="match" href="slot-fallback-content-006-ref.html">

<p>Test passes if there are two lines of text "B", "A" below.</p>

<div id="host1">
  <slot id="slot1" name="slot1">FAIL</slot>
</div>
<div id="A">A</div>
<div id="B">B</div>

<p>Test passes if there are two lines of text "D", "C" below.</p>

<div id="host2">
  <slot id="slot2" name="slot2">FAIL</slot>
</div>
<div id="C">C</div>
<div id="D">D</div>

<p>Test passes if there are two lines of text "F", "E" below.</p>

<div id="host3">
  <slot id="slot3" name="slot3">FAIL</slot>
</div>
<div id="E">E</div>
<div id="F">F</div>

<p>Test passes if there is one line of text "SLOT4" below.</p>

<div id="host4">
  <slot id="slot4" name="slot4">SLOT4</slot>
</div>
<div id="G">FAIL</div>
<div id="H">FAIL</div>

<p>Test passes if there is one line of text "SLOT5" below.</p>

<div id="host5">
  <slot id="slot5" name="slot5">FAIL</slot>
</div>
<div id="I">FAIL</div>
<div id="J">FAIL</div>

<script>
/*
1. Append nodes to document.
2. Assign nodes to slot.
*/
const shadowRoot1 = host1.attachShadow({ mode: "open", slotAssignment: 'manual' });
shadowRoot1.appendChild(slot1);
const s1 = shadowRoot1.getElementById('slot1');
host1.append(A, B);
s1.assign(B, A);

/*
1. Assign nodes to slot.
2. Append nodes to document.
*/
const shadowRoot2 = host2.attachShadow({ mode: "open", slotAssignment: 'manual' });
shadowRoot2.appendChild(slot2);
const s2 = shadowRoot2.getElementById('slot2');
s2.assign(D, C);
host2.append(C, D);

/*
1. Assign nodes to slot.
2. Change the fallback content.
3. Append nodes to document.
*/
const shadowRoot3 = host3.attachShadow({ mode: "open", slotAssignment: 'manual' });
shadowRoot3.appendChild(slot3);
const s3 = shadowRoot3.getElementById('slot3');
s3.assign(F, E);
s3.innerText = 'FAIL';
host3.append(E, F);

/*
1. Append nodes to document.
2. Assign nodes to slot.
3. Remove nodes from document.
*/
const shadowRoot4 = host4.attachShadow({ mode: "open", slotAssignment: 'manual' });
shadowRoot4.appendChild(slot4);
const s4 = shadowRoot4.getElementById('slot4');
host4.append(G, H);
s4.assign(H, G);
G.remove();
H.remove();

/*
1. Append nodes to document.
2. Assign nodes to slot.
3. Change the fallback content.
4. Remove nodes from document.
*/
const shadowRoot5 = host5.attachShadow({ mode: "open", slotAssignment: 'manual' });
shadowRoot5.appendChild(slot5);
const s5 = shadowRoot5.getElementById('slot5');
host5.append(I, J);
s5.assign(J, I);
s5.innerText = 'SLOT5';
I.remove();
J.remove();

</script>
