simple-mixed.html (1468B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Simple mixed reading flow test</title> 4 <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> 5 <link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="../resources/focusgroup-utils.js"></script> 12 13 <style> 14 .container { 15 display: flex; 16 flex-direction: row-reverse; 17 reading-flow: flex-visual; 18 } 19 </style> 20 21 <div focusgroup="toolbar"> 22 <div class="container"> 23 <button id="btn3" tabindex="0">Button 3</button> 24 <button id="btn2" tabindex="0">Button 2</button> 25 <button id="btn1" tabindex="0">Button 1</button> 26 </div> 27 <button id="btn4" tabindex="0">Button 4</button> 28 </div> 29 30 <script> 31 promise_test(async t => { 32 // Visual order due to flex-direction: row-reverse and reading-flow: flex-visual 33 // Visual order: btn1, btn2, btn3, btn4 34 const elementsInVisualOrder = [ 35 document.getElementById("btn1"), 36 document.getElementById("btn2"), 37 document.getElementById("btn3"), 38 document.getElementById("btn4") 39 ]; 40 41 await assert_focus_navigation_bidirectional(elementsInVisualOrder); 42 }, "Simple mixed reading flow test."); 43 </script>