1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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>
|
