focus-navigation-slot-fallback-default-tabindex.html (2847B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-vendor.js"></script> 6 <script src="/resources/testdriver-actions.js"></script> 7 <script src="resources/shadow-dom.js"></script> 8 <script src="resources/focus-utils.js"></script> 9 <p>Tests for moving focus by pressing tab key across shadow boundaries.<br> 10 To manually test, press tab key six times then shift+tab seven times.<br> 11 It should traverse focusable elements in the increasing numerical order and then in the reverse order.</p> 12 13 <div id='host'> 14 <div slot='slot5' id='i2' tabindex=4>2. Assigned to slot5 whose tabindex is 2.</div> 15 <template data-mode='open'> 16 <slot name='slot1'> 17 x. The default tabindex for a slot node is set to 0. 18 <div id='i5' tabindex=0>5. The parent slot node's tabindex is 0. Second.</div> 19 <div id='i4' tabindex=2>4. The parent slot node's tabindex is 0. First.</div> 20 </slot> 21 22 <slot name='slot2' id='x1' tabindex=3> 23 x. The tabindex is 3. The slot node should be ignored. 24 <div id='i3' tabindex=10>3. The parent slot node's tabindex is 3. The slot node's tabindex matters. This element's tabindex comes after.</div> 25 </slot> 26 27 <slot name='slot3' id='x2' tabindex=0> 28 x. The tabindex is 0. The slot node should be ignored. If there is another slot node in same tabindex, the younger child comes first. 29 <div id='i6' tabindex=1>6. The parent slot node's tabindex is 0. First.</div> 30 <div id='i7' tabindex=1>7. The parent slot node's tabindex is 0. Second.</div> 31 </slot> 32 33 <slot name='slot4' id='x3' tabindex=1> 34 x. The tabindex is 1. The slot node should be ignored. 35 <div id='i1' tabindex=5>1. The slot node tabindex is 1.</div> 36 </slot> 37 38 <slot name='slot5' id='x5' tabindex=2> 39 x. The tabindex is 2. The slot node should be ignored. The host child is assigned to this slot node. 40 <div id='-' tabindex=1>-. The host child is assigned to the parent slot node. This text shouldn't appear.</div> 41 </slot> 42 43 <slot name='slot6' id='x6' tabindex=5> 44 x. The tabindex is 5. The slot node should be ignored. 45 <div id='x6' tabindex=-1>x. tabindex is -1. Should be skipped.</div> 46 </slot> 47 48 <slot name='slot7' id='x7' tabindex=-1> 49 x. tabindex is -1. Should be skipped. 50 <div id='x8' tabindex=1>x. The parent slot node is skipped.</div> 51 </slot> 52 </template> 53 </div> 54 <script> 55 56 promise_test(async () => { 57 convertTemplatesToShadowRootsWithin(host); 58 59 let elements = [ 60 'host/i1', 61 'i2', 62 'host/i3', 63 'host/i4', 64 'host/i5', 65 'host/i6', 66 'host/i7' 67 ]; 68 69 await assert_focus_navigation_bidirectional(elements); 70 }, 'Default tabindex for a slot node should be 0.'); 71 72 </script>