focus-navigation-scroller-tabindex.html (1776B)
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 border: 1px solid lightgray; 17 } 18 div.long { 19 width: 40em; 20 height: 40em; 21 } 22 </style> 23 24 <button id="start">START</button> 25 26 <div id="scroller-tabindex" class="scroll" tabindex="0"> 27 <p>Scroller has tabindex=0.</p> 28 <button id="A">BUTTON A</button> 29 <div class="long"></div> 30 </div> 31 32 <div id="scroller-tabindex-2" class="scroll" tabindex="0"> 33 <p>Scroller has tabindex=0.</p> 34 <div class="long"></div> 35 </div> 36 37 <div id="scroller-none" class="scroll"> 38 <p>Scroller has no tabindex.</p> 39 <button id="B">BUTTON B</button> 40 <div class="long"></div> 41 </div> 42 43 <div id="scroller-none-2" class="scroll"> 44 <p>Scroller has no tabindex.</p> 45 <div class="long"></div> 46 </div> 47 48 <div id="scroller-negative" class="scroll" tabindex="-1"> 49 <p>Scroller has tabindex=-1.</p> 50 <button id="C">BUTTON C</button> 51 <div class="long"></div> 52 </div> 53 54 <div id="scroller-negative-2" class="scroll" tabindex="-1"> 55 <p>Scroller has tabindex=-1.</p> 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 'scroller-tabindex', 67 'A', 68 'scroller-tabindex-2', 69 'B', 70 'scroller-none-2', 71 'C', 72 'end', 73 ]; 74 75 assert_focus_navigation_bidirectional(elements); 76 }, 'Should focus on scroller depending on tabindex value.'); 77 78 </script>