flexbox_align-items-stretch-writing-modes.html (1856B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS Test: Flexbox align-items: stretch with writing-mode vertical-lr and vertical-rl</title> 5 <link rel="author" title="Mitsuteru Sawa" href="mailto:mitsuteru.s@gmail.com"> 6 <link rel="reviewer" title="Tab Atkins Jr." href="mailto:jackalmage@gmail.com"> 7 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-align-items"> 8 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow"> 9 <link rel="match" href="flexbox_align-items-stretch-writing-modes-ref.html"> 10 <meta name="assert" content="vertical-writing-mode flex items should stretch"> 11 <style> 12 .container { 13 display: flex; 14 width: 250px; 15 } 16 .vertical-rl { 17 writing-mode: vertical-rl; 18 } 19 .vertical-lr { 20 writing-mode: vertical-lr; 21 } 22 .item { 23 background-color: green; 24 } 25 .square { 26 height: 50px; 27 width: 50px; 28 } 29 .error { 30 position: absolute; 31 background-color: red; 32 height: 100px; 33 width: 250px; 34 z-index: -1; 35 } 36 </style> 37 </head> 38 <body> 39 <p>The test passes if you see a green rectangle and no red.</p> 40 <div class="test"> 41 <div class="error"></div> 42 <div class="container"> 43 <div class="horizontal item"> 44 <div class="square"></div> 45 <div class="square"></div> 46 </div> 47 <div class="vertical-rl item"> 48 <div class="square"></div> 49 <div class="square"></div> 50 </div> 51 <div class="vertical-lr item"> 52 <div class="square"></div> 53 <div class="square"></div> 54 </div> 55 </div> 56 </div> 57 </body> 58 </html>