css-flexbox-test1.html (1803B)
1 <!DOCTYPE html> <!-- coding:utf-8 --> 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 <!-- The match link is only required if this is a reftest --> 12 <link rel="match" href="css-flexbox-test1-ref.html"> 13 <meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical."> 14 <style type="text/css"> 15 .container { 16 display: flex; 17 flex-flow: row; 18 writing-mode: vertical-rl; 19 color: white; 20 } 21 .item { 22 background: green; 23 height: 3em; 24 width: 3em; 25 26 /* make sure UA that doesn't support writing mode and flexbox fails. */ 27 float: right; 28 } 29 .error { 30 position: absolute; 31 background: red; 32 height: 9em; 33 width: 3em; 34 z-index: -1; 35 } 36 </style> 37 </head> 38 <body> 39 <p>The test passes if you see a tall green box with pairs of the digits 1-9 listed top to bottom in two columns.</p> 40 41 <div class="error"></div> 42 <div class="container"> 43 <div class="item">１２３<br />１２３</div> 44 <div class="item">４５６<br />４５６</div> 45 <div class="item">７８９<br />７８９</div> 46 </div> 47 48 </body> 49 </html>