normal.html (2259B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <title>CSS Display: reading-flow with value normal</title> 5 <link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-flow"> 6 <link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src='../../resources/shadow-dom.js'></script> 13 <script src="../../resources/focus-utils.js"></script> 14 15 <style> 16 .wrapper { 17 reading-flow: normal; 18 } 19 .grid { 20 display: grid; 21 } 22 .block { 23 display: block; 24 } 25 </style> 26 27 <div class="test-case" data-expect="t1-c,t1-d,t1-g1,t1-h2,t2-e,t2-f,t2-g2,a,b,g,h,h1" 28 data-description="Grid items. Focus should be in DOM tabindexed-order."> 29 <div class="wrapper grid"> 30 <button id="a" tabindex="3" style="order: -1">Item A</button> 31 <button id="b" tabindex="3" style="order: 0">Item B</button> 32 <button id="t1-c" tabindex="1" style="order: -1">Item C</button> 33 </div> 34 <div class="wrapper grid"> 35 <button id="t1-d" tabindex="1" style="order: 1">Item D</button> 36 <button id="t2-e" tabindex="2" style="order: 0">Item E</button> 37 <button id="t2-f" tabindex="2" style="order: -1">Item F</button> 38 </div> 39 <div class="wrapper grid"> 40 <div id="g" style="order: 2" tabindex="3">G 41 <div id="t1-g1" tabindex="1">Item G1</div> 42 <div id="t2-g2" tabindex="2">Item G2</div> 43 </div> 44 <div id="h" style="order: 1" tabindex="3">H 45 <div id="h1" tabindex="3">Item H1</div> 46 <div id="t1-h2" tabindex="1">Item H2</div> 47 </div> 48 </div> 49 </div> 50 51 <div class="test-case" data-expect="t5-c,t6-a,t6-b" 52 data-description="Block elements. Focus should be in DOM tabindexed-order."> 53 <div class="wrapper block"> 54 <button id="t6-a" style="order: 1; reading-order: 1" tabindex="6">Item A</button> 55 <button id="t6-b" style="order: -1; reading-order: -1" tabindex="6">Item B</button> 56 <button id="t5-c" style="order: 0; reading-order: 0" tabindex="5">Item C</button> 57 </div> 58 </div> 59 60 <script> 61 runFocusTestCases(); 62 </script>