grid-auto-flow-reading-order.html (2073B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <title>CSS Display: reading-order with value grid-auto-flow dense</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 grid-template-columns: repeat(3, 150px); 19 grid-auto-flow: dense; 20 reading-flow: grid-rows; 21 } 22 23 .top { reading-order: -1; } 24 25 </style> 26 27 <div class="test-case" data-expect="a4,a1,a2,a3,a5,a6" 28 data-description="Grid items should follow grid-rows reading flow, but let reading-order can move item's focus order to the top."> 29 <div class="wrapper"> 30 <button id=a1>Item 1</button> 31 <button id=a2>Item 2</button> 32 <button id=a3>Item 3</button> 33 <button id=a4 class="top">Item 4</button> 34 <button id=a5>Item 5</button> 35 <button id=a6>Item 6</button> 36 </div> 37 </div> 38 39 <br> 40 41 <div class="test-case" data-expect="b3,b5,b4,b6,b1,b2" 42 data-description="Grid items should follow reading flow, mix of reading-order and order values."> 43 <div class="wrapper"> 44 <button id=b1 style="order: 2; reading-order: 2">order: 2 reading-order: 2</button> 45 <button id=b2 style="order: -1; reading-order: 6">order: -1; reading-order: 6</button> 46 <button id=b3 style="order: 1; reading-order: -1">order: 1; reading-order: -1</button> 47 <button id=b4 style="order: -2; reading-order: 2">order: -2; reading-order: 2</button> 48 <button id=b5 style="order: 0; reading-order: 0">order: 0; reading-order: 0</button> 49 <button id=b6 style="order: -1; reading-order: 2">order: -1; reading-order: 2</button> 50 </div> 51 </div> 52 53 54 <script> 55 runFocusTestCases(); 56 </script>