<!doctype html>
<title>Image width and height attributes are used to infer aspect-ratio for lazy-loaded images</title>
<meta name="viewport" content="width=device-width">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  img {
    width: 100%;
    max-width: 100px;
    height: auto;
  }
</style>
<div style="height: 600vh"></div>
<img src="/images/green.png" loading="lazy" width=100 height=100>
<script>
let t = async_test("Image width and height attributes are used to infer aspect-ratio for lazy-loaded images");

function assert_ratio(img, expected) {
  let epsilon = 0.001;
  assert_approx_equals(parseFloat(getComputedStyle(img).width, 10) / parseFloat(getComputedStyle(img).height, 10), expected, epsilon);
}

t.step(function() {
  let img = document.querySelector("img");
  assert_ratio(img, 1.0);
  img.addEventListener("load", t.step_func_done(function() {
    assert_ratio(img, 2.0); // 2.0 is the original aspect ratio of green.png
  }));
  window.scrollTo(0, img.getBoundingClientRect().top);
});
</script>