flex-aspect-ratio-img-vert-lr.html (791B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-main-item"> 5 <meta name="assert" content="Flex item should compute its main size from its definite cros size and aspect ratio."> 6 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 7 <style> 8 .flexbox { 9 position: relative; 10 display: flex; 11 writing-mode: vertical-lr; 12 width: 100px; 13 align-items: start; 14 } 15 .flex-item{ 16 width: 40px 17 } 18 .abspos { 19 width: 60px; 20 height: 100px; background-color: green; 21 position: absolute; 22 left: 40px; 23 } 24 </style> 25 </head> 26 </head> 27 <body> 28 <p>Test passes if there is a filled green square.</p> 29 <div class="flexbox"> 30 <img class="flex-item" src="support/20x50-green.png"> 31 <div class="abspos"></div> 32 </div> 33 </body> 34 </html>