img-aspect-ratio-lazy.html (1370B)
1 <!doctype html> 2 <title>Image width and height attributes are used to infer aspect-ratio for lazy-loaded images</title> 3 <meta name="viewport" content="width=device-width"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 img { 8 width: 100%; 9 max-width: 100px; 10 height: auto; 11 } 12 </style> 13 <div style="height: 600vh"></div> 14 <img src="/images/green.png" loading="lazy" width=100 height=100> 15 <script> 16 let t = async_test("Image width and height attributes are used to infer aspect-ratio for lazy-loaded images"); 17 18 function assert_ratio(img, expected) { 19 let epsilon = 0.001; 20 assert_approx_equals(parseFloat(getComputedStyle(img).width, 10) / parseFloat(getComputedStyle(img).height, 10), expected, epsilon); 21 } 22 23 t.step(function() { 24 let img = document.querySelector("img"); 25 // The initial aspect ratio is given by the width/height attributes: 26 // https://html.spec.whatwg.org/#map-to-the-aspect-ratio-property-(using-dimension-rules) 27 assert_ratio(img, 1.0); 28 img.addEventListener("load", t.step_func_done(function() { 29 // Now the element "represents an image": 30 // https://html.spec.whatwg.org/multipage/rendering.html#images-3 31 // 2.0 is the original aspect ratio of green.png 32 assert_ratio(img, 2.0); 33 })); 34 window.scrollTo(0, img.getBoundingClientRect().top); 35 }); 36 </script>