slot-fallback-content-006.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /shadow-dom/slot-fallback-content-006.html - WPT Dashboard Interop Dashboard

<!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>