flex-aspect-ratio-img-row-016.html (1253B)
1 <!DOCTYPE html> 2 <title>aspect-ratio flex item</title> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> 4 <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> 5 <meta name="assert" content="% max-height is updated when height of parent changes when %max-height affects max-content size of item"> 6 7 <style> 8 #target { 9 display: flex; 10 align-items: start; 11 width: 50px; 12 height: 50px; 13 } 14 15 img { 16 /* Remove min-width:auto because it complicates things. */ 17 min-width: 0px; 18 max-height: 100%; 19 background: green; 20 } 21 </style> 22 23 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 24 <div id="target"> 25 <!-- This image's natural size is 1000x1000 --> 26 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoAQMAAAB3bUanAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAKpJREFUeNrswYEAAAAAgKD9qRepAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABg9uBAAAAAAADI/7URVFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVWlPTgkAAAAABD0/7UrbAAAAADMAuw/AAGdJWCbAAAAAElFTkSuQmCC 27 "> 28 </div> 29 30 <script> 31 document.body.offsetTop; 32 target.style.width = '100px'; 33 document.body.offsetTop; 34 target.style.height = '100px'; 35 </script>