slot-fallback-content-004.html (1755B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" > 3 <meta name="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> 4 <meta name="assert" content="Remove assigned light nodes of a slot, when dynamically created."> 5 <title>Shadow DOM: Slots and fallback contents</title> 6 <link rel="match" href="slot-fallback-content-004-ref.html"> 7 8 <p>Test passes if there is one line of text "SLOT1" below.</p> 9 10 <div id="host1"> 11 <slot id="slot1" name="slot1">SLOT1</slot> 12 <div id="A" slot="slot1">FAIL</div> 13 </div> 14 15 <p>Test passes if empty.</p> 16 17 <div id="host2"> 18 <slot id="slot2" name="slot2"></slot> 19 <div id="B" slot="slot2">FAIL</div> 20 </div> 21 22 <p>Test passes if there is one line of text "SLOT3" below.</p> 23 24 <div id="host3"> 25 <slot id="slot3" name="slot3">SLOT3</slot> 26 <div id="C" slot="slot3">FAIL</div> 27 </div> 28 29 <p>Test passes if there is one line of text "SLOT4" below.</p> 30 31 <div id="host4"> 32 <slot id="slot4" name="slot4">SLOT4</slot> 33 <div id="D" slot="slot4">FAIL</div> 34 </div> 35 36 <script> 37 // Remove a slot's assigned node should show fallback content 38 const shadowRoot1 = host1.attachShadow({ mode: "open" }); 39 shadowRoot1.appendChild(slot1); 40 A.remove(); 41 42 // Remove a slot's assigned node with no fallback should show nothing 43 const shadowRoot2 = host2.attachShadow({ mode: "open" }); 44 shadowRoot2.appendChild(slot2); 45 B.remove(); 46 47 // Remove the slot attribute to an assigned node should show fallback content 48 const shadowRoot3 = host3.attachShadow({ mode: "open" }); 49 shadowRoot3.appendChild(slot3); 50 C.removeAttribute('slot'); 51 52 // Change the slot attribute to an assigned node to an unknown slot 53 // should show fallback content 54 const shadowRoot4 = host4.attachShadow({ mode: "open" }); 55 shadowRoot4.appendChild(slot4); 56 D.setAttribute('slot', 'invalid'); 57 58 </script>