flex-aspect-ratio-img-column-011.html (4012B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox: images' aspect ratio in flex box with flex-direction: column for min-size: auto</title> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> 6 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-intrinsic"> 7 <link rel="help" href="https://crbug.com/581535"> 8 <link rel="help" href="https://crbug.com/581361"> 9 <link href="support/flexbox.css" rel="stylesheet"> 10 <meta name="assert" content="Images maintain aspect ratio in flex box with column direction with min-size: auto."> 11 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <script src="/resources/check-layout-th.js"></script> 15 16 <body onload="checkLayout('.flexbox')"> 17 <div id=log></div> 18 19 <div class="flexbox" style="width: 10px;" data-expected-width="10"> 20 <!-- should use content width, clamped by converted max-height, as minimum width. --> 21 <img src="support/100x100-green.png" style="max-height: 5px;" 22 data-expected-width="5" data-expected-height="5"> 23 </div> 24 25 <div class="flexbox" style="width: 10px;" data-expected-width="10"> 26 <!-- should use min(specified, content width) = 10px as minimum width, 27 which the image will shrink to due to default flex-shrink. --> 28 <img src="support/10x10-green.png" style="width: 100px;" data-expected-width="10"> 29 </div> 30 31 <div class="flexbox" style="width: 10px;" data-expected-width="10"> 32 <!-- should use content width, clamped by converted min-height, as minimum width. --> 33 <img src="support/100x100-green.png" style="max-height: 5px;" 34 data-expected-width="5" data-expected-height="5"> 35 </div> 36 37 <div class="flexbox" style="width: 10px;" data-expected-width="10"> 38 <!-- should use content width, clamped by converted min-height, as minimum width. --> 39 <img src="support/100x100-green.png" style="max-height: 5px; min-height: 10px;" 40 data-expected-width="10" data-expected-height="10"> 41 </div> 42 43 <div class="flexbox" style="width: 10px;" data-expected-width="10"> 44 <!-- transferred and content suggestions are both 100px here, so minimum 45 width is min(transferred, content width) = 100px. --> 46 <img src="support/10x10-green.png" style="height: 100px;" data-expected-width="100"> 47 </div> 48 49 <div class="flexbox column" style="height: 10px;" data-expected-height="10"> 50 <!-- should use content height, clamped by converted max-width, as minimum height. --> 51 <img src="support/100x100-green.png" style="max-width: 5px;" 52 data-expected-width="5" data-expected-height="5"> 53 </div> 54 55 <div class="flexbox column" style="height: 10px; width: 50px;" data-expected-height="10"> 56 <!-- should use min(specified=100, content height=50) = 50px as minimum height, 57 which the image will shrink to due to default flex-shrink. --> 58 <img src="support/10x10-green.png" style="height: 100px;" data-expected-height="50"> 59 </div> 60 61 <div class="flexbox" style="height: 10px;" data-expected-height="10"> 62 <!-- should use content height, clamped by converted min-height, as minimum height. --> 63 <img src="support/100x100-green.png" style="max-height: 5px;" 64 data-expected-height="5" data-expected-height="5"> 65 </div> 66 67 <div class="flexbox" style="height: 10px;" data-expected-height="10"> 68 <!-- should use content height, clamped by converted min-width, as minimum height. --> 69 <img src="support/100x100-green.png" style="max-width: 5px; min-width: 10px;" 70 data-expected-height="10" data-expected-width="10"> 71 </div> 72 73 <div class="flexbox column" style="height: 10px;" data-expected-height="10"> 74 <!-- should use min(transferred (100), content height (100)) = 100px as 75 minimum height, which will be final height of the image --> 76 <img src="support/10x10-green.png" style="width: 100px;" data-expected-height="100"> 77 </div>