grid-columns.html (1362B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <title>CSS Display: reading-flow with value grid-columns</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-template-areas: "d b b" 20 "c c a"; 21 reading-flow: grid-columns; 22 } 23 24 .a { grid-area: a; } 25 .b { grid-area: b; } 26 .c { grid-area: c; } 27 .d { grid-area: d; } 28 29 </style> 30 31 <div class="test-case" data-expect="d1,c1,b1,a1" 32 data-description="Grid items in grid template columns should follow grid-columns reading flow"> 33 <div class="wrapper"> 34 <button class="a" id="a1">Item A</button> 35 <button class="b" id="b1">Item B</button> 36 <button class="c" id="c1">Item C</button> 37 <button class="d" id="d1">Item D</button> 38 </div> 39 </div> 40 41 42 <script> 43 runFocusTestCases(); 44 </script>