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