This is a test for image ratios and lazy loading

Note: this has been raised as bug 1045745 with the Chrome team.

Below we load the same image twice (with a query param to make the brower think they are different images).
The second has the loading="lazy" attribute for native lazy loading, but other than that (and the query param to make it look like a different image) it is identical.
We also add width and height attributes to the image. We also override the width with CSS and set the height to auto.

The recently released aspect ratio work, which is now on by default since Chrome 79 should allow Chrome to calculate the height, based on the image attributes and thus avoid a content relayout. This works perfectly for the first image, but the second image does not do it. Slow down your network in Dev Tools to make this clear with the lower <hr> element jumping once the images come in also, see the incorrect initial image height calculated by JavaScript.

What's even weirder is that I am seeing two different (incorrect) values for the second image height: 16 if dev tools is closed and 300 if dev tools is open. I've no idea why this would be different?

Note this works perfectly in Firefox for both images.



Image one initial height is: Loading...



Image two initial height is: Loading...