focus-with-negative-index.html (3141B)
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 <p> 11 document tree: [i0 -> [x-foo]]<br> 12 x-foo's shadow tree: [j5 -> [x-bar] -> j6]<br> 13 x-bar's shadow tree: [k1 -> k0 -> [s2]]<br> 14 slot #s2: [j1 -> j2 -> j3 -> j4 -> [s1] -> j0]<br><br> 15 slot #s1: [i1 -> i2]<br> 16 <b>v1 ideal nav forward: [i0 -> j5 -> xbar -> k1 -> k0 -> j6]</b><br> 17 </p> 18 19 <input id='i0' tabindex=0 value='i0'> 20 <div id='x-foo'> 21 <input id='i2' slot='s1' tabindex=2 value='i2'> 22 <input id='i1' slot='s1' tabindex=1 value='i1'> 23 <template data-mode='open'> 24 <div id='x-bar' tabindex=4> 25 <input id='j1' slot='s2' tabindex=1 value='j1'> 26 <slot id='s1' name='s1' slot='s2'></slot> 27 <input id='j0' slot='s2' tabindex=0 value='j0'> 28 <input id='j3' slot='s2' tabindex=2 value='j3'> 29 <div id='j4' slot='s2' tabindex=3> 30 <input id='j2' tabindex=1 value='j2'> 31 </div> 32 <template data-mode='open'> 33 <input id='k0' tabindex=0 value='k0'> 34 <slot id='s2' name='s2' tabindex=-1></slot> 35 <input id='k1' tabindex=1 value='k1'> 36 </template> 37 </div> 38 <div id='to-be-ignored-host' tabindex=-1> 39 <template data-mode='open'> 40 <input id='ignored-input-in-shadow-host1' tabindex=1 value='ignored'> 41 <input id='ignored-input-in-shadow-host2' tabindex=2 value='ignored'> 42 </template> 43 </div> 44 <input id='j6' tabindex=4 value='j6'> 45 <input id='j5' tabindex=3 value='j5'> 46 </template> 47 </div> 48 </div> 49 50 <script> 51 'use strict'; 52 53 let xfoo = document.getElementById('x-foo'); 54 convertTemplatesToShadowRootsWithin(xfoo); 55 let sr = xfoo.shadowRoot; 56 57 promise_test(async () => { 58 let elements = [ 59 'i0', 60 'x-foo/j5', 61 'x-foo/x-bar', 62 'x-foo/x-bar/k1', 63 'x-foo/x-bar/k0', 64 'x-foo/j6' 65 ]; 66 67 await assert_focus_navigation_bidirectional(elements); 68 }, 'Focus controller should treat slots as a focus scope.'); 69 70 promise_test(async () => { 71 let ignoredHost = sr.getElementById('to-be-ignored-host'); 72 let ignoredInput1 = ignoredHost.shadowRoot.querySelector('input'); 73 let ignoredInput2 = ignoredInput1.nextElementSibling; 74 75 let elements = [ 76 'x-foo/to-be-ignored-host/ignored-input-in-shadow-host1', 77 'x-foo/to-be-ignored-host/ignored-input-in-shadow-host2', 78 'x-foo/j6' 79 ]; 80 81 await assert_focus_navigation_forward(elements); 82 83 let elementsBackward = [ 84 'x-foo/to-be-ignored-host/ignored-input-in-shadow-host2', 85 'x-foo/to-be-ignored-host/ignored-input-in-shadow-host1', 86 'x-foo/x-bar/k0' 87 ]; 88 await assert_focus_navigation_backward(elementsBackward); 89 }, 'This is a regression test: After focusing negative tabindex-ed elements, focus moves in tree order.'); 90 </script>