<meta charset="utf-8" />

<title>CSS Flexbox Test: flex direction: row, writing mode vertical</title>

<link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" />

<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" />

<!-- You must have at least one spec link, but may have as many as are covered in the test. -->

<!-- Be sure to make the main testing area first in the order -->

<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">

<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">

<!-- The match link is only required if this is a reftest -->

<link rel="match" href="css-flexbox-row-ref.html">

<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row wrap, the flex container is vertical.">

<style type="text/css">

.container {

display: flex;

flex-flow: row wrap;

writing-mode: vertical-rl;

border: 2px solid black;

height: 90px;

}

.item {

width: 15px;

height: 45px;

/* make sure UA that doesn't support writing mode and flexbox fails. */

float: right;

}

</style>

<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow.

<div class="container">

<div class="item" style="background: orange"></div>

<div class="item" style="background: blue"></div>

<div class="item" style="background: grey"></div>

<div class="item" style="background: yellow"></div>

</div>