flex-aspect-ratio-img-column-010.html (1430B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="author" title="Google LLC" href="http://www.google.com" /> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" /> 5 <title>css-flexbox: Tests that we use the aspect ratio to compute the main size when there is a definite cross size and a specified but indefinite flex-basis</title> 6 <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> 7 8 <style> 9 #reference-overlapped-red { 10 position: absolute; 11 background-color: red; 12 width: 100px; 13 height: 100px; 14 z-index: -1; 15 } 16 17 .flex { 18 display: flex; 19 flex-direction: column; 20 justify-content: flex-start; 21 align-items: flex-start; 22 float: left; 23 } 24 25 img { 26 flex: 0 0 0%; 27 height: 500px; 28 min-width: 0; 29 min-height: 0; /* Disable min-size: auto so we don't have to think about it. */ 30 width: 40px; 31 } 32 </style> 33 <script> 34 // Force a relayout after the image loads to work around http://crbug.com/1042329 35 window.onload = (event) => { 36 flex.style.width = "50px"; 37 flex.offsetTop; 38 flex.style.width = "auto"; 39 flex.offsetTop; 40 document.documentElement.classList.remove("reftest-wait") 41 } 42 </script> 43 44 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 45 46 <div id="reference-overlapped-red"></div> 47 <div style="width:60px; height: 100px; background: green; float: left;"></div> 48 <div class="flex" id=flex> 49 <img src="support/20x50-green.png"> 50 </div>