focus-navigation-slots-in-slot.html (1846B)
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 <p>Tests for moving focus by pressing tab key across nodes in slot scope.<br> 11 12 <div id="b1" tabindex="0">outside</div> 13 <div id='host'> 14 <template data-mode='open'> 15 <slot></slot> 16 </template> 17 <slot> 18 <div id="1A" tabindex="0">single nested slot</div> 19 <div id="1B" tabindex="0">single nested slot</div> 20 </slot> 21 <slot> 22 <div id="1C" tabindex="0">single nested slot</div> 23 </slot> 24 <slot> 25 <slot> 26 <div id="2A" tabindex="0">double nested slot</div> 27 <div id="2B" tabindex="0">double nested slot</div> 28 </slot> 29 </slot> 30 <slot> 31 <div id="3A" tabindex="0">single nested slot</div> 32 <slot> 33 <div id="3B" tabindex="0">double nested slot</div> 34 <slot> 35 <div id="3C" tabindex="0">Triple nested slot</div> 36 <div id="3D" tabindex="0">Triple nested slot</div> 37 </slot> 38 <div id="3E" tabindex="0">double nested slot</div> 39 </slot> 40 <div id="3F" tabindex="0">single nested slot</div> 41 </slot> 42 </div> 43 <div id="b2" tabindex="0">outside</div> 44 45 <script> 46 'use strict'; 47 48 promise_test(async () => { 49 convertTemplatesToShadowRootsWithin(host); 50 51 let elements = [ 52 'b1', 53 '1A', 54 '1B', 55 '1C', 56 '2A', 57 '2B', 58 '3A', 59 '3B', 60 '3C', 61 '3D', 62 '3E', 63 '3F', 64 'b2', 65 ]; 66 67 await assert_focus_navigation_bidirectional(elements); 68 }, 'Focus should cover assigned nodes of slot, especially for nested slots in slot scope.'); 69 70 </script>