4 https://bugzilla.mozilla.org/show_bug.cgi?id=812687
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" />
12 .container { display: flex; }
14 #focus1 { background: yellow; }
15 #focus2 { background: lightgray; }
16 #focus3 { background: orange; }
17 #focus4 { background: lightblue; }
18 #focus5 { background: pink; }
22 <a target=
"_blank" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=812687">Mozilla Bug
812687</a>
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>
39 <div id=
"content" style=
"display: none"></div>
42 <script class=
"testbody" type=
"text/javascript">
44 /** Test for Bug
812687 **/
46 const gExpectedFocusedIds = [
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");
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");
71 // Before we start, we have to bump Mac to make its 'tab'-key focus behavior
74 SpecialPowers.pushPrefEnv({ set: [[
"accessibility.tabfocus",
7 ]] }, doTest);
77 SimpleTest.waitForExplicitFinish();