focus-navigation-scroller-delegatesFocus.html (1884B)
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-actions.js></script> 6 <script src='/resources/testdriver-vendor.js'></script> 7 <script src='../resources/shadow-dom.js'></script> 8 <script src='../resources/focus-utils.js'></script> 9 10 <style> 11 div.scroll { 12 overflow: auto; 13 width: 20em; 14 height: 5em; 15 display: block; 16 } 17 div.long { 18 width: 40em; 19 height: 40em; 20 } 21 </style> 22 23 <button id="start">START</button> 24 25 <div id="host-no-delegates-focus" class="scroll"> 26 <template shadowrootmode="open"> 27 <p>Scroller shadow root has delegatesFocus false.</p> 28 <button id="A">BUTTON A</button> 29 <slot></slot> 30 </template> 31 <div class=long></div> 32 </div> 33 34 <div id="host-no-delegates-focus-2" class="scroll"> 35 <template shadowrootmode="open"> 36 <p>Scroller shadow root has delegatesFocus false.</p> 37 <slot></slot> 38 </template> 39 <div class=long></div> 40 </div> 41 42 <div id="host-delegates-focus" class="scroll"> 43 <template shadowrootmode="open" shadowrootdelegatesfocus> 44 <p>Scroller shadow root has delegatesFocus true.</p> 45 <button id="B">BUTTON B</button> 46 <slot></slot> 47 </template> 48 <div class=long></div> 49 </div> 50 51 <div id="host-delegates-focus-2" class="scroll"> 52 <template shadowrootmode="open" shadowrootdelegatesfocus> 53 <p>Scroller shadow root has delegatesFocus true.</p> 54 <slot></slot> 55 </template> 56 <div class=long></div> 57 </div> 58 59 <button id="end">END</button> 60 61 <script> 62 63 promise_test(async () => { 64 let elements = [ 65 'start', 66 'host-no-delegates-focus/A', 67 'host-no-delegates-focus-2', 68 'host-delegates-focus/B', 69 'end' 70 ]; 71 72 assert_focus_navigation_bidirectional(elements); 73 }, 'Should focus on scroller across shadow boundaries depending on delegatesFocus value.'); 74 75 </script>