grid-order-with-nested-grids.html (2508B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <title>CSS Display: reading-flow with value grid-order in nested grids</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 .box { 17 display: grid; 18 reading-flow: grid-order; 19 border-radius: 5px; 20 padding: 20px; 21 border-style: dashed; 22 } 23 24 </style> 25 26 <div class="test-case" data-expect="w,d3,b3a,b3b,d2,b2,d1,b1a,b1b" 27 data-description="Grid items are not grid containers."> 28 <div class="box" id="w" tabindex="0"> 29 <div style="order: 2" id="d1" tabindex="0">Div 1 30 <button id="b1a" style="order: 3">Button 1A</button> 31 <button id="b1b">Button 1B</button> 32 </div> 33 <div id="d2" tabindex="0">Div 2 34 <button id="b2">Button 2</button> 35 </div> 36 <div id="d3" style="order: -1" tabindex="0">Div 3 37 <button id="b3a" style="order: 2">Button 3A</button> 38 <button id="b3b">Button 3B</button> 39 </div> 40 </div> 41 </div> 42 43 <div class="test-case" 44 data-expect="wrapper,div3,button3b,button3a,div2,button2,div1,button1b,button1a" 45 data-description="Grid items are grid containers."> 46 <div class="box" id="wrapper" tabindex="0"> 47 <div class="box" style="order: 2" id="div1" tabindex="0">Div 1 48 <button id="button1a" style="order: 3">Button 1A</button> 49 <button id="button1b">Button 1B</button> 50 </div> 51 <div class="box" id="div2" tabindex="0">Div 2 52 <button id="button2">Button 2</button> 53 </div> 54 <div class="box" id="div3" style="order: -1" tabindex="0">Div 3 55 <button id="button3a" style="order: 2">Button 3A</button> 56 <button id="button3b">Button 3B</button> 57 </div> 58 </div> 59 </div> 60 61 <div class="test-case" data-expect="a,b,d,c" 62 data-description="Only has grid containers."> 63 <div class="box" id="a" tabindex="0">A 64 <div class="box" id="b" tabindex="0">B 65 <div class="box" id="c" tabindex="0" style="order: 2">C</div> 66 <div class="box" id="d" tabindex="0">D</div> 67 </div> 68 </div> 69 </div> 70 71 <script> 72 runFocusTestCases(); 73 </script>