focus-navigation-slot-nested-delegatesFocus.html (1334B)
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 This test case is based on the crbug.com/618587 reproduction case: 12 http://jsbin.com/bonudiwagu/1/edit?html,output 13 --> 14 <input id='i0'> 15 <div id='x-foo'> 16 <template data-mode='open' data-delegatesFocus> 17 <input id='inner-before'> 18 <slot></slot> 19 <input id='inner-after'> 20 </template> 21 <div id='nested'> 22 <template data-mode='open' data-delegatesFocus> 23 <input id='nested-x'> 24 <slot></slot> 25 <input id='nested-y'> 26 </template> 27 <input id='light'> 28 </div> 29 </div> 30 <input id='i1'> 31 32 <script> 33 promise_test(async () => { 34 var xFoo = document.querySelector('#x-foo'); 35 convertTemplatesToShadowRootsWithin(xFoo); 36 37 var elements = [ 38 'i0', 39 'x-foo/inner-before', 40 'nested/nested-x', 41 'light', 42 'nested/nested-y', 43 'x-foo/inner-after', 44 'i1' 45 ]; 46 47 await assert_focus_navigation_bidirectional(elements); 48 }, 'Focus controller should treat each slot as a focus scope.'); 49 </script>