source-order-valid.html (2869B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <title>CSS Display: reading-flow with value source-order should work</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 reading-flow: source-order; 18 } 19 </style> 20 21 <div class="test-case" data-expect="b1,c1,a1" 22 data-description="Block elements. Focus should be in DOM tabindexed-order, but reading-order takes effect."> 23 <div class="wrapper" style="display: block"> 24 <button id="a1" style="reading-order: 1">Item A</button> 25 <button id="b1" style="reading-order: -1">Item B</button> 26 <button id="c1" style="reading-order: 0">Item C</button> 27 </div> 28 </div> 29 30 <div class="test-case" data-expect="b2,c2,a2" 31 data-description="Block inline elements. Focus should be in DOM tabindexed-order, but reading-order takes effect."> 32 <div class="wrapper" style="display: block-inline"> 33 <button id="a2" style="reading-order: 1">Item A</button> 34 <button id="b2" style="reading-order: -1">Item B</button> 35 <button id="c2" style="reading-order: 0">Item C</button> 36 </div> 37 </div> 38 39 <div class="test-case" data-expect="b3,c3,a3" 40 data-description="Flex elements. Focus should be in DOM tabindexed-order, but reading-order takes effect."> 41 <div class="wrapper" style="display: flex"> 42 <button id="a3" style="reading-order: 1; order: -1">Item A</button> 43 <button id="b3" style="reading-order: -1">Item B</button> 44 <button id="c3" style="reading-order: 0">Item C</button> 45 </div> 46 </div> 47 48 <div class="test-case" data-expect="b4,c4,a4" 49 data-description="Grid elements. Focus should be in DOM tabindexed-order, but reading-order takes effect."> 50 <div class="wrapper" style="display: grid"> 51 <button id="a4" style="reading-order: 1; order: -1">Item A</button> 52 <button id="b4" style="reading-order: -1">Item B</button> 53 <button id="c4" style="reading-order: 0">Item C</button> 54 </div> 55 </div> 56 57 <div class="test-case" data-expect="b5,c5,a5" 58 data-description="Flow root elements. Focus should be in DOM tabindexed-order, but reading-order takes effect."> 59 <div class="wrapper" style="display: flow-root"> 60 <button id="a5" style="reading-order: 1">Item A</button> 61 <button id="b5" style="reading-order: -1">Item B</button> 62 <button id="c5" style="reading-order: 0">Item C</button> 63 </div> 64 </div> 65 66 67 <script> 68 runFocusTestCases(); 69 </script>