grid-order-with-display-contents.html (3091B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <title>CSS Display: reading-flow with value grid-order and display: contents elements</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="order1,order2,order4,order3" 23 data-description="Items in display contents are sorted in same grid container and are placed in the position where their first child resides."> 24 <div class="wrapper"> 25 <div style="display: contents"> 26 <button id="order3" style="order: 3">Order 3</button> 27 <button id="order1" style="order: 1">Order 1</button> 28 <div style="display: contents"> 29 <button id="order4" style="order: 4">Order 4</button> 30 <button id="order2" style="order: 2">Order 2</button> 31 </div> 32 </div> 33 </div> 34 </div> 35 36 <div class="test-case" data-expect="div1B,order1B,div2B,order2B,order4B,order3B" 37 data-description="Items in display contents are sorted in same grid container and are placed in the position where their first child resides. The display contents have tabindex and should be focusable."> 38 <div class="wrapper"> 39 <div id="div1B" style="display: contents" tabindex="0"> 40 <button id="order3B" style="order: 3">Order 3</button> 41 <button id="order1B" style="order: 1">Order 1</button> 42 <div id="div2B" style="display: contents" tabindex="0"> 43 <button id="order4B" style="order: 4">Order 4</button> 44 <button id="order2B" style="order: 2">Order 2</button> 45 </div> 46 </div> 47 </div> 48 </div> 49 50 <div class="test-case" data-expect="C1,C2,C3,D1,D2,D3,B1,B2,B3,A1,A2,A3" 51 data-description="Grid items are in nested display contents containers."> 52 <div class=wrapper> 53 <div style="display:contents" tabindex="0" id="A1"> 54 <div style="display:contents" tabindex="0" id="A2"> 55 <button style="order: 4" id="A3">A</button> 56 </div> 57 </div> 58 <div style="display:contents" tabindex="0" id="B1"> 59 <div style="display:contents" tabindex="0" id="B2"> 60 <button style="order: 3" id="B3">B</button> 61 </div> 62 </div> 63 <div style="display:contents" tabindex="0" id="C1"> 64 <div style="display:contents" tabindex="0" id="C2"> 65 <button style="order: 1" id="C3">C</button> 66 </div> 67 </div> 68 <div style="display:contents" tabindex="0" id="D1"> 69 <div style="display:contents" tabindex="0" id="D2"> 70 <button style="order: 2" id="D3">D</button> 71 </div> 72 </div> 73 </div> 74 </div> 75 76 <script> 77 runFocusTestCases(); 78 </script>