diff options
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/slot-fallback-content-006.html')
-rw-r--r-- | testing/web-platform/tests/shadow-dom/slot-fallback-content-006.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/testing/web-platform/tests/shadow-dom/slot-fallback-content-006.html b/testing/web-platform/tests/shadow-dom/slot-fallback-content-006.html new file mode 100644 index 0000000000..4708ee7b44 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/slot-fallback-content-006.html @@ -0,0 +1,109 @@ +<!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> |