test_flexbox_focus_order.html (2721B)
1 <!DOCTYPE html> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=812687 5 --> 6 <head> 7 <title>Test for Bug 812687: focus order of reordered flex items</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 11 <style> 12 .container { display: flex; } 13 14 #focus1 { background: yellow; } 15 #focus2 { background: lightgray; } 16 #focus3 { background: orange; } 17 #focus4 { background: lightblue; } 18 #focus5 { background: pink; } 19 </style> 20 </head> 21 <body> 22 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=812687">Mozilla Bug 812687</a> 23 <p id="display"> 24 <a href="#" id="beforeContainer">Link before container</a> 25 <!-- This flex container's children are reordered visually with the "order" 26 CSS property, but their focus order (when tabbing through them) should 27 match their DOM order. So, #focus1 should receive focus before the other 28 flex items, even though it isn't visually the first flex item. And so 29 on, up to #focus5, which is visually first (due to its negative "order" 30 value) but should be focused last (due to being last in the DOM). --> 31 <div class="container"> 32 <a href="#" id="focus1">1</a> 33 <div><a href="#" id="focus2">2</a></div> 34 <div style="order: 100"><a href="#" id="focus3">3</a></div> 35 <div><a href="#" id="focus4">4</a></div> 36 <a href="#" id="focus5" style="order: -1">5</a> 37 </div> 38 </p> 39 <div id="content" style="display: none"></div> 40 41 <pre id="test"> 42 <script class="testbody" type="text/javascript"> 43 44 /** Test for Bug 812687 */ 45 46 const gExpectedFocusedIds = [ 47 "focus1", 48 "focus2", 49 "focus3", 50 "focus4", 51 "focus5" 52 ]; 53 54 function doTest() { 55 // First, we focus something just before the flex container: 56 document.getElementById('beforeContainer').focus(); 57 is(document.activeElement, document.getElementById('beforeContainer'), 58 "explicitly-focused link should gain focus"); 59 60 // And then we advance focus across the focusable things in the flex container 61 // and check that we traverse them in the expected order: 62 for (let expectedId of gExpectedFocusedIds) { 63 synthesizeKey("KEY_Tab"); 64 is(document.activeElement, document.getElementById(expectedId), 65 "expecting element '#" + expectedId + "' to be focused"); 66 } 67 68 SimpleTest.finish(); 69 } 70 71 // Before we start, we have to bump Mac to make its 'tab'-key focus behavior 72 // predicatble: 73 function begin() { 74 SpecialPowers.pushPrefEnv({ set: [[ "accessibility.tabfocus", 7 ]] }, doTest); 75 } 76 77 SimpleTest.waitForExplicitFinish(); 78 addLoadEvent(begin); 79 80 </script> 81 </pre> 82 </body> 83 </html>