| <!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> |
