flex-aspect-ratio-img-column-017.html (1539B)
1 <!doctype html> 2 <title>Non aspect-ratio svg flex item</title> 3 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> 6 <meta name="assert" content="Specified height on an svg image with no aspect ratio or intrinsic height is not the automatic minimum size." /> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/check-layout-th.js"></script> 11 12 <div id=log></div> 13 14 <pre> 15 Specified size suggestion = 200px 16 Content size suggestion = 150px [1] 17 Automatic minimum height = min(150px, 200px) 18 19 [1] fallback size from last bullet point in https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes : 20 21 For boxes without a preferred aspect ratio: 22 * If the available space is definite in the appropriate dimension, use the stretch fit into that size in that dimension. 23 * Otherwise, if the box has a <length> as its computed minimum size (min-width/min-height) in that dimension, use that size. 24 * Otherwise, use 300px for the width and/or 150px for the height as needed. 25 26 </pre> 27 Pass condition: there is a 150x150 green square. 28 <div style="display: flex; flex-direction: column; height: 0px; width: 150px;"> 29 <img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" />' style="height: 200px; background: green;" data-expected-height=150> 30 </div> 31 32 <script> 33 checkLayout('img'); 34 </script>