Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-lazy.html - WPT Dashboard Interop Dashboard
<!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:
assert_ratio(img, 1.0);
img.addEventListener("load", t.step_func_done(function() {
// Now the element "represents an image":
// 2.0 is the original aspect ratio of green.png
assert_ratio(img, 2.0);
}));
window.scrollTo(0, img.getBoundingClientRect().top);
});
</script>