flexbox-min-width-auto-005.html (1020B)
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/#min-size-auto" /> 5 <link rel="help" href="https://github.com/web-platform-tests/wpt/issues/31609" /> 6 <link rel="match" href="reference/flexbox-min-width-auto-005-ref.html" /> 7 8 <style> 9 .reference-overlapped-red { 10 position: absolute; 11 background-color: red; 12 width: 100px; 13 height: 50px; 14 z-index: -1; 15 } 16 .constrained-flex { 17 display: flex; 18 height: 50px; 19 } 20 br { margin: 50px; } 21 </style> 22 23 <p>Test passes if there is <strong>no red</strong> visible on the page.</p> 24 25 <div class="reference-overlapped-red"></div> 26 <div class="constrained-flex"> 27 <img src="support/40x20-green.png" /> 28 </div> 29 30 <br> 31 32 <div class="reference-overlapped-red"></div> 33 <div style="display: flex"> 34 <div class="constrained-flex"> 35 <img src="support/40x20-green.png" /> 36 </div> 37 </div>