| Quellcodebibliothek Statistik Leitseite products/sources/formale Sprachen/C/Firefox/layout/reftests/image/ (Browser von der Mozilla Stiftung Version 136.0.1©) Datei vom 10.2.2025 mit Größe 60 B |
|
Quelle test_flexbox_focus_order.html Sprache: HTML |
|||||||||||||||||
<!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">Mozill <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>
¤ Dauer der Verarbeitung: 0.25 Sekunden (vorverarbeitet) ¤*© Formatika GbR, Deutschland |
|
||||||||||||||||
2026-04-04