flex-flow.html (2108B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <title>CSS Display: reading-flow with value flex-flow</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 button:nth-child(3) { 17 order: -1; 18 } 19 20 .wrapper button:nth-child(5) { 21 reading-order: -1; 22 } 23 24 .wrapper { 25 display: flex; 26 flex-wrap: wrap; 27 reading-flow: flex-flow; 28 } 29 </style> 30 31 <div class="test-case" data-expect="E1,C1,A1,B1,D1" 32 data-description="Flex items in flexbox should follow flex-flow reading flow"> 33 <div class="wrapper" style="width: 200px"> 34 <button id="A1">Item A</button> 35 <button id="B1">Item B</button> 36 <button id="C1">Item C</button> 37 <button id="D1">Item D</button> 38 <button id="E1">Item E</button> 39 </div> 40 </div> 41 42 <div class="test-case" data-expect="E2,C2,A2,B2,D2" 43 data-description="Flex items in rtl flexbox should follow flex-flow reading flow"> 44 <div class="wrapper" style="width: 200px; direction: rtl"> 45 <button id="A2">Item A</button> 46 <button id="B2">Item B</button> 47 <button id="C2">Item C</button> 48 <button id="D2">Item D</button> 49 <button id="E2">Item E</button> 50 </div> 51 </div> 52 53 <div class="test-case" data-expect="E3,C3,A3,B3,D3" 54 data-description="Flex items in vertical-lr flexbox should follow flex-flow reading flow"> 55 <div class="wrapper" style="height: 200px; writing-mode: vertical-lr"> 56 <button id="A3">Item A</button> 57 <button id="B3">Item B</button> 58 <button id="C3">Item C</button> 59 <button id="D3">Item D</button> 60 <button id="E3">Item E</button> 61 </div> 62 </div> 63 64 <script> 65 runFocusTestCases(); 66 </script>