flex-aspect-ratio-img-row-014.html (1002B)
1 <!DOCTYPE html> 2 <title>CSS Flexible Box Test: Aspect ratio handling of images</title> 3 <link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com" /> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" /> 5 <link rel="match" href="reference/flex-aspect-ratio-img-row-014-ref.html" /> 6 <meta name="assert" content="Test that we compute the correct aspect-ratio based cross size when a percentage main size is specified" /> 7 8 <style> 9 #reference-overlapped-red { 10 position: absolute; 11 background-color: red; 12 width: 90px; 13 height: 225px; 14 z-index: -1; 15 } 16 #constrained-flex { 17 display: flex; 18 width: 300px; 19 border: 1px solid black; 20 } 21 img { 22 min-width: 0; 23 min-height: 0; 24 width: 30%; 25 } 26 </style> 27 28 <p>Test passes if there is <strong>no red</strong> visible on the page.</p> 29 30 <div id="reference-overlapped-red"></div> 31 <div id="constrained-flex"> 32 <img id="test-flex-item-overlapping-green" src="support/20x50-green.png" /> 33 </div>