focus-navigation-slot-shadow-in-slot.html (1369B)
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 <div id="log"></div> 10 11 <input id="i0" tabindex=0 value="i0"> 12 <div id="assigned"> 13 <template data-mode="open"> 14 <slot id="s0" name="s0"> 15 <div id="x-foo"> 16 <input id="a1" slot="s2" value="a1"> 17 <template data-mode="open"> 18 <input id="a2" tabindex=3 value="a2"> 19 <slot id="s1" name="s1" tabindex=2> 20 <slot id="s2" name="s2"></slot> 21 </slot> 22 <input id="a0" tabindex=1 value="a0"> 23 </template> 24 </div> 25 </slot> 26 </template> 27 </div> 28 29 <script> 30 'use strict'; 31 32 promise_test(async () => { 33 let assigned = document.getElementById('assigned'); 34 convertTemplatesToShadowRootsWithin(assigned); 35 36 let elements = [ 37 'i0', 38 'assigned/x-foo/a0', 39 'assigned/a1', 40 'assigned/x-foo/a2' 41 ]; 42 43 await assert_focus_navigation_bidirectional(elements); 44 }, 'Focus should cover assigned elements of an assigned slot, as well as elements that are directly assigned to a slot.'); 45 </script>