nested-containers.html (1888B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Reading flow scope with nested containers</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 .outer-flex { 15 display: flex; 16 reading-flow: flex-visual; 17 } 18 .inner-flex { 19 display: flex; 20 reading-flow: flex-visual; 21 } 22 23 /* Reorder the outer container children */ 24 .outer-flex #item1 { order: 3; } 25 .outer-flex .inner-container { order: 1; } 26 .outer-flex #item4 { order: 2; } 27 28 /* Reorder the inner container children */ 29 .inner-flex #item2 { order: 2; } 30 .inner-flex #item3 { order: 1; } 31 </style> 32 33 <div class="outer-flex" focusgroup="toolbar"> 34 <span id=item1 tabindex=0>item1 (DOM 1, outer order 3)</span> 35 <div class="inner-flex inner-container"> 36 <span id=item2 tabindex=0>item2 (DOM 2, inner order 2)</span> 37 <span id=item3 tabindex=0>item3 (DOM 3, inner order 1)</span> 38 </div> 39 <span id=item4 tabindex=0>item4 (DOM 4, outer order 2)</span> 40 </div> 41 42 <script> 43 44 promise_test(async t => { 45 // DOM order: item1, item2, item3, item4 46 // Visual order: item3, item2, item4, item1 47 const elementsInVisualOrder = [ 48 document.getElementById("item3"), 49 document.getElementById("item2"), 50 document.getElementById("item4"), 51 document.getElementById("item1") 52 ]; 53 54 await assert_focus_navigation_bidirectional(elementsInVisualOrder); 55 }, "Focusgroup navigation with nested reading flow containers should follow the visual order."); 56 57 </script>