focus-navigation-slot-nested-2levels.html (1676B)
1 <!DOCTYPE html> 2 <meta name="timeout" content="long"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/resources/testdriver.js"></script> 6 <script src="/resources/testdriver-vendor.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 <script src="resources/shadow-dom.js"></script> 9 <script src="resources/focus-utils.js"></script> 10 <div id="log"></div> 11 12 <input id='i0'> 13 <div id='outer'> 14 <template data-mode='open'> 15 <input id='outer-before'> 16 <slot></slot> 17 <input id='outer-after'> 18 </template> 19 <div id='dummy1'></div> 20 <div id='nested1'> 21 <template data-mode='open'> 22 <input id='inner-before'> 23 <div id='inner-div' tabindex='0'><slot></slot></div> 24 <input id='inner-after'> 25 </template> 26 <div id='dummy2'></div> 27 <div id='nested2'> 28 <template data-mode='open'> 29 <input id='innermost-before'> 30 <slot></slot> 31 <input id='innermost-after'> 32 </template> 33 <input id='innermost1'> 34 <input id='innermost2'> 35 </div> 36 <span>button</span> 37 </div> 38 </div> 39 <input id='i1'> 40 41 <script> 42 promise_test(async () => { 43 var outer = document.querySelector('#outer'); 44 convertTemplatesToShadowRootsWithin(outer); 45 46 var elements = [ 47 'i0', 48 'outer/outer-before', 49 'nested1/inner-before', 50 'nested1/inner-div', 51 'nested2/innermost-before', 52 'innermost1', 53 'innermost2', 54 'nested2/innermost-after', 55 'nested1/inner-after', 56 'outer/outer-after', 57 'i1' 58 ]; 59 60 await assert_focus_navigation_bidirectional(elements); 61 }, 'Focus controller should treat each slot as a focus scope.'); 62 </script>