slots-fallback-in-document.html (1609B)
1 <!DOCTYPE html> 2 <title>Shadow DOM: Slots and fallback contents in Document tree</title> 3 <meta name="author" title="Takayoshi Kochi" href="mailto:kochi@google.com"> 4 <script src='/resources/testharness.js'></script> 5 <script src='/resources/testharnessreport.js'></script> 6 <script src="resources/shadow-dom.js"></script> 7 8 <div id="test1"> 9 <div id="host"> 10 <template data-mode="open"> 11 <slot id="innerSlot"></slot> 12 </template> 13 <slot id="slot"><div id="fallback">This is fallback content</div></slot> 14 </div> 15 </div> 16 17 <script> 18 'use strict'; 19 20 let n1 = createTestTree(test1); 21 removeWhiteSpaceOnlyTextNodes(n1.test1); 22 23 test(() => { 24 assert_array_equals(n1.innerSlot.assignedNodes(), [n1.slot]); 25 assert_array_equals(n1.innerSlot.assignedNodes({ flatten: true }), [n1.slot]); 26 }, 'Children of a slot in a document tree should not be counted in flattened ' + 27 'assigned nodes.'); 28 </script> 29 30 <div id="test2"> 31 <div id="host"> 32 <template data-mode="open"> 33 <div id="innerHost"> 34 <template data-mode="open"> 35 <slot id="innerSlot"></slot> 36 </template> 37 <slot id="slot"><div id="fallback">This is fallback content</div></slot> 38 </div> 39 </template> 40 </div> 41 </div> 42 43 <script> 44 'use strict'; 45 46 let n2 = createTestTree(test2); 47 removeWhiteSpaceOnlyTextNodes(n2.test2); 48 49 test(() => { 50 assert_array_equals(n2.innerSlot.assignedNodes(), [n2.slot]); 51 assert_array_equals(n2.innerSlot.assignedNodes({ flatten: true }), 52 [n2.fallback]); 53 }, 'Slot fallback content in shadow tree should be counted in flattened ' + 54 'assigned nodes.'); 55 </script>