flex-aspect-ratio-img-row-005.html (1913B)
1 <!doctype html> 2 <title>Aspect-ratio items with borders</title> 3 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Section B"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion"> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#content-size-suggestion"> 7 <meta name="assert" content="Multiplying cross size by aspect ratio should operate on content box only."> 8 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/check-layout-th.js"></script> 12 13 <style> 14 img { 15 border-top: 50px solid blue; 16 border-left: 10px solid orange; 17 } 18 19 .flexbox { 20 display: flex; 21 margin-bottom: 20px; 22 } 23 </style> 24 25 <!-- script after body was flakily triggering before images were loaded, so wait for onload --> 26 <body onload="checkLayout('img')"> 27 28 <p> 29 The green boxes should all be 100x100. 30 </p> 31 32 Section B of flex base size + transferred size suggestion: 33 <div class=flexbox> 34 <img style="height: 100px;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 /> 35 </div> 36 37 Section B of flex base size + transferred size suggestion, with box-sizing: border-box: 38 <!-- Chrome 83 fails the border-box version. --> 39 <div class=flexbox> 40 <img style="height: 150px; box-sizing: border-box;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 /> 41 </div> 42 43 content size suggestion 44 <div class=flexbox> 45 <img style="max-height: 100px;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 /> 46 </div> 47 48 content size suggestion 49 <div class=flexbox> 50 <img style="min-height: 100px;" src="support/60x60-green.png" data-expected-client-width=100 data-expected-client-height=100 /> 51 </div> 52 53 </body>