focus-navigation-slot-nested-fallback.html (2657B)
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 six times.<br> 11 It should traverse focusable elements in the increasing numerical order and then in the reverse order.</p> 12 <div id='host'> 13 <template data-mode='open'> 14 <slot name='slot1'>Slot shouldn't be focused. 15 <slot name='slot2'>Slot shouldn't be focused. 16 <div id='non1' tabindex=0>This text shouldn't appear.</div> 17 </slot> 18 <slot name='slot3'>Slot shouldn't be focused. 19 <div id='second' tabindex=0>2. No host child is assigned to slot3.</div> 20 </slot> 21 </slot> 22 23 <div id='third' tabindex=0>3. Inner Shadow Host. 24 <template data-mode='open'> 25 <slot name='slot4'>Slot shouldn't be focused. 26 <slot name='slot5'>Slot shouldn't be focused. 27 <div id='non2' tabindex=0>This text shouldn't appear.</div> 28 </slot> 29 </slot> 30 </template> 31 <div id='fourth' slot='slot4' tabindex=0>4. Assigned to slot4.</div> 32 <div id='non3' slot='slot5' tabindex=0> 33 This text shouldn't appear. slot5 is in the fallback content of slot4 which has assigned nodes.</div> 34 </div> 35 36 <div id='fifth' tabindex=0>5. Inner Shadow Host. 37 <template data-mode='open'> 38 <slot name='slot6'>Slot shouldn't be focused. 39 <div id='non4' tabindex=0>This text shouldn't appear.</div> 40 </slot> 41 </template> 42 <slot name='slot7' slot='slot6'>Slot shouldn't be focused. Assigned to slot6. 43 <div id='non5' tabindex=0>This text shouldn't appear.</div> 44 </slot> 45 </div> 46 </template> 47 <div id='first' slot='slot2' tabindex=0>1. Assigned to slot2.</div> 48 <div id='sixth' slot='slot7' tabindex=0>6. Assigned to slot7 which is assigned to slot6.</div> 49 </div> 50 <script> 51 'use strict'; 52 53 promise_test(async () => { 54 let host = document.getElementById('host'); 55 convertTemplatesToShadowRootsWithin(host); 56 57 let elements = [ 58 'first', 59 'host/second', 60 'host/third', 61 'host/fourth', 62 'host/fifth', 63 'sixth' 64 ]; 65 66 await assert_focus_navigation_bidirectional(elements); 67 }, 'Focus should cover assigned elements of an assigned slot espacially there are fallback contents.'); 68 69 </script>