grid-order.html (2989B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <title>CSS Display: reading-flow with value grid-order</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 display: grid; 18 reading-flow: grid-order; 19 } 20 </style> 21 22 <div class="test-case" data-expect="a1,b1,c1,d1,e1" 23 data-description="Grid items without `order` property"> 24 <div class="wrapper"> 25 <button id="a1">Item A</button> 26 <button id="b1">Item B</button> 27 <button id="c1">Item C</button> 28 </div> 29 <div class="wrapper"> 30 <button id="d1">Item D</button> 31 <button id="e1">Item E</button> 32 </div> 33 </div> 34 35 <div class="test-case" data-expect="b2,c2,a2,e2,d2" 36 data-description="Grid items with `order` property"> 37 <div class="wrapper"> 38 <button id="a2" style="order: 2">Item A</button> 39 <button id="b2">Item B</button> 40 <button id="c2">Item C</button> 41 </div> 42 <div class="wrapper"> 43 <button id="d2">Item D</button> 44 <button id="e2" style="order: -1">Item E</button> 45 </div> 46 </div> 47 48 <div class="test-case" data-expect="a3,c3,b3,f3,e3,d3,h3,h32,h31,g3,g31,g32" 49 data-description="Grid items with `order` property and tabindex. Positive tabindex doesn't reorder reading flow item, but can affect its descendants."> 50 <div class="wrapper"> 51 <button id="a3" style="order: -1">Item A</button> 52 <button id="b3" style="order: 0">Item B</button> 53 <button id="c3" tabindex="1" style="order: -1">Item C</button> 54 </div> 55 <div class="wrapper"> 56 <button id="d3" tabindex="1" style="order: 1">Item D</button> 57 <button id="e3" tabindex="2" style="order: 0">Item E</button> 58 <button id="f3" tabindex="2" style="order: -1">Item F</button> 59 </div> 60 <div class="wrapper"> 61 <div id="g3" style="order: 2" tabindex="0">G 62 <div id="g31" tabindex="1">Item G1</div> 63 <div id="g32" tabindex="2">Item G2</div> 64 </div> 65 <div id="h3" style="order: 1" tabindex="0">H 66 <div id="h31" tabindex="0">Item H1</div> 67 <div id="h32" tabindex="1">Item H2</div> 68 </div> 69 </div> 70 </div> 71 72 <div class="test-case" data-expect="d4,b4,c4,a4" 73 data-description="Items in display block are not in parent grid container."> 74 <div class="wrapper"> 75 <button id="a4" style="order: 3">A</button> 76 <div style="order: 1" style="display: block"> 77 <button id="b4" style="order: 2">B</button> 78 <button id="c4" style="order: -1">C</button> 79 </div> 80 <button id="d4">D</button> 81 </div> 82 </div> 83 84 <script> 85 runFocusTestCases(); 86 </script>