1 files changed, 36 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-lazy.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-lazy.html
new file mode 100644
index 0000000000..1833efb804
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-lazy.html
@@ -0,0 +1,36 @@
+<!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");
+  // The initial aspect ratio is given by the width/height attributes:
+  // https://html.spec.whatwg.org/#map-to-the-aspect-ratio-property-(using-dimension-rules)
+  assert_ratio(img, 1.0);
+  img.addEventListener("load", t.step_func_done(function() {
+    // Now the element "represents an image":
+    // https://html.spec.whatwg.org/multipage/rendering.html#images-3
+    // 2.0 is the original aspect ratio of green.png
+    assert_ratio(img, 2.0);
+  }));
+  window.scrollTo(0, img.getBoundingClientRect().top);
+});
+</script>