diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
| commit | 2aa4a82499d4becd2284cdb482213d541b8804dd (patch) | |
| tree | b80bf8bf13c3766139fbacc530efd0dd9d54394c /layout/style/test/test_flexbox_focus_order.html | |
| parent | Initial commit. (diff) | |
| download | firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.tar.xz firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.zip | |
Adding upstream version 86.0.1.upstream/86.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/style/test/test_flexbox_focus_order.html')
| -rw-r--r-- | layout/style/test/test_flexbox_focus_order.html | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/layout/style/test/test_flexbox_focus_order.html b/layout/style/test/test_flexbox_focus_order.html new file mode 100644 index 0000000000..0c1f023e3c --- /dev/null +++ b/layout/style/test/test_flexbox_focus_order.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=812687 +--> +<head> + <title>Test for Bug 812687: focus order of reordered flex items</title> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <script src="/tests/SimpleTest/EventUtils.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> + <style> + .container { display: flex; } + + #focus1 { background: yellow; } + #focus2 { background: lightgray; } + #focus3 { background: orange; } + #focus4 { background: lightblue; } + #focus5 { background: pink; } + </style> +</head> +<body> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=812687">Mozilla Bug 812687</a> +<p id="display"> + <a href="#" id="beforeContainer">Link before container</a> + <!-- This flex container's children are reordered visually with the "order" + CSS property, but their focus order (when tabbing through them) should + match their DOM order. So, #focus1 should receive focus before the other + flex items, even though it isn't visually the first flex item. And so + on, up to #focus5, which is visually first (due to its negative "order" + value) but should be focused last (due to being last in the DOM). --> + <div class="container"> + <a href="#" id="focus1">1</a> + <div><a href="#" id="focus2">2</a></div> + <div style="order: 100"><a href="#" id="focus3">3</a></div> + <div><a href="#" id="focus4">4</a></div> + <a href="#" id="focus5" style="order: -1">5</a> + </div> +</p> +<div id="content" style="display: none"></div> + +<pre id="test"> +<script class="testbody" type="text/javascript"> + +/** Test for Bug 812687 **/ + +const gExpectedFocusedIds = [ + "focus1", + "focus2", + "focus3", + "focus4", + "focus5" +]; + +function doTest() { + // First, we focus something just before the flex container: + document.getElementById('beforeContainer').focus(); + is(document.activeElement, document.getElementById('beforeContainer'), + "explicitly-focused link should gain focus"); + + // And then we advance focus across the focusable things in the flex container + // and check that we traverse them in the expected order: + for (let expectedId of gExpectedFocusedIds) { + synthesizeKey("KEY_Tab"); + is(document.activeElement, document.getElementById(expectedId), + "expecting element '#" + expectedId + "' to be focused"); + } + + SimpleTest.finish(); +} + +// Before we start, we have to bump Mac to make its 'tab'-key focus behavior +// predicatble: +function begin() { + SpecialPowers.pushPrefEnv({ set: [[ "accessibility.tabfocus", 7 ]] }, doTest); +} + +SimpleTest.waitForExplicitFinish(); +addLoadEvent(begin); + +</script> +</pre> +</body> +</html> |