diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-lazy.html')
-rw-r--r-- | testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-lazy.html | 36 |
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> |