flex-direction-row-002-visual.html (1064B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: flex-direction:row axis matches that of writing mode 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 <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 writing mode"> 9 <style> 10 11 .test { 12 display: flex; 13 width: 3em; 14 flex-direction :row; 15 } 16 17 .test > span { 18 width: 1em; 19 direction: ltr; 20 } 21 22 #row-ltr { 23 direction: ltr; 24 } 25 26 #row-rtl { 27 direction: rtl; 28 } 29 </style> 30 </head> 31 <body> 32 <p>Test passes if both the lines below are identical.</p> 33 <div class="test" id="row-ltr"> 34 <span>A</span><span>B</span><span>C</span> 35 </div> 36 <div class="test" id="row-rtl"> 37 <span>C</span><span>B</span><span>A</span> 38 </div> 39 </body> 40 </html>