css-flexbox-row-reverse-wrap.html (1762B)
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-reverse wrap, the flex container is vertical."> 15 <style type="text/css"> 16 .container { 17 display: flex; 18 flex-flow: row-reverse wrap; 19 writing-mode: vertical-rl; 20 border: 2px solid black; 21 height: 90px; 22 } 23 .item { 24 width: 15px; 25 height: 45px; 26 27 /* make sure UA that doesn't support writing mode and flexbox fails. */ 28 float: right; 29 } 30 </style> 31 </head> 32 <body> 33 <p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. 34 35 <div class="container"> 36 <div class="item" style="background: blue"></div> 37 <div class="item" style="background: orange"></div> 38 <div class="item" style="background: yellow"></div> 39 <div class="item" style="background: grey"></div> 40 </div> 41 </body> 42 </html>