flex-direction-row-vertical.html (1236B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: flex-direction:row has the same orientation as inline axis</title> 5 <link rel="author" title="Sylvain Galineau" href="mailto:galineau@adobe.com"> 6 <link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com"> 7 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction"> 8 <link rel="match" href="flex-direction-row-vertical-ref.html"> 9 <meta name="assert" content="This test checks that the main axis of the row flex-direction has the same orientation as the inline axis of the current vertical writing mode"> 10 <style> 11 #vertical { 12 writing-mode: vertical-lr; 13 } 14 15 .test { 16 display: flex; 17 width: 3em; 18 flex-direction :row; 19 } 20 21 .test > span { 22 width: 1em; 23 direction: ltr; 24 } 25 26 #row-ltr { 27 direction: ltr; 28 } 29 30 #row-rtl { 31 direction: rtl; 32 } 33 </style> 34 </head> 35 <body> 36 <p>Test passes if both the two columns below are identical.</p> 37 <div id="vertical"> 38 <div class="test" id="row-ltr"> 39 <span>A</span><span>B</span><span>C</span> 40 </div> 41 <div class="test" id="row-rtl"> 42 <span>C</span><span>B</span><span>A</span> 43 </div> 44 </div> 45 </body> 46 </html>