css-flexbox-row.html (1961B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS Flexbox Test: flex direction: row, writing mode vertical</title> 6 <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" /> 7 <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" /> 8 <!-- You must have at least one spec link, but may have as many as are covered in the test. --> 9 <!-- Be sure to make the main testing area first in the order --> 10 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> 11 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow"> 12 <!-- The match link is only required if this is a reftest --> 13 <link rel="match" href="css-flexbox-row-ref.html"> 14 <meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical."> 15 <style type="text/css"> 16 .container { 17 display: flex; 18 flex-flow: row; 19 writing-mode: vertical-rl; 20 border: 2px solid black; 21 height: 90px; 22 } 23 .item { 24 line-height: 0; 25 26 /* make sure UA that doesn't support writing mode and flexbox fails. */ 27 float: right; 28 } 29 .color-block { 30 display: inline-block; 31 width: 15px; 32 height: 45px; 33 } 34 </style> 35 </head> 36 <body> 37 <p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. 38 <div class="container"> 39 <div class="item"> 40 <span class=color-block style="background: orange;"></span> 41 <br /> 42 <span class=color-block style="background: grey;"></span> 43 </div> 44 <div class="item"> 45 <span class=color-block style="background: blue;"></span> 46 <br /> 47 <span class=color-block style="background: yellow;"></span> 48 </div> 49 </div> 50 </body> 51 </html>