grid-order-pseudo-elements.html (1165B)
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 pseudo 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 .wrapper::before { 21 content: "A"; 22 order: 4; 23 } 24 .wrapper::after { 25 content: "Z"; 26 order: 2; 27 } 28 </style> 29 30 <div class="test-case" data-expect="o1,o3" 31 data-description="Grid pseudo items are not focusable"> 32 <div class="wrapper" id="wrapper"> 33 <button id="o3" style="order: 3">Item 3</button> 34 <button id="o1" style="order: 1">Item 1</button> 35 </div> 36 </div> 37 38 <script> 39 runFocusTestCases(); 40 </script>