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