flex-aspect-ratio-img-row-004.html (1293B)
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, clamped by cross min/max, to compute the main size.</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 justify-content: flex-start; 20 align-items: flex-start; 21 } 22 23 img { 24 min-width: 0; /* Disable min-size: auto so we don't have to think about it. */ 25 min-height: 100px; 26 } 27 </style> 28 <script> 29 // Force a relayout after the image loads to work around http://crbug.com/1042329 30 window.onload = (event) => { 31 flex.style.width = "50px"; 32 flex.offsetTop; 33 flex.style.removeProperty("width"); 34 flex.offsetTop; 35 document.documentElement.classList.remove("reftest-wait") 36 } 37 </script> 38 39 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 40 41 <div id="reference-overlapped-red"></div> 42 <div style="width:60px; height: 100px; background: green; float: left;"></div> 43 <div id="flex"> 44 <img src="support/20x50-green.png"> 45 </div>