aspect-ratio-affects-container-width-when-height-changes.html (1131B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes"> 4 <p>There should be a green square below, and no red.</p> 5 <div id="container" style="height:200px;"> 6 <div style="height:100%;" data-expected-height="100"> 7 <div style="float:left; height:100%; background:red;" data-expected-width="100" data-expected-height="100"> 8 <!-- The image is a 1x1 transparent one. --> 9 <img style="display:block; height:100%; background:green;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-expected-width="100" data-expected-height="100"> 10 </div> 11 </div> 12 </div> 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 <script src="/resources/check-layout-th.js"></script> 16 <script> 17 test(()=> { 18 document.body.offsetTop; 19 document.getElementById("container").style.height = "100px"; 20 checkLayout("#container"); 21 }, "Changing height should affect the descendant widths, due to aspect ratio"); 22 </script>