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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<!doctype html>
<title>img relevant mutations, lazy-loaded</title>
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/relevant-mutations.js"></script>
<div id=log></div>
<img src="/images/green-2x2.png"> <!-- block the window load event -->
<!-- should invoke update the image data, but omit events for layout changes -->
<!-- but also see https://github.com/whatwg/html/issues/8492 -->
<img srcset="/images/green-2x2.png 2w" sizes="auto" width="2" loading="lazy" data-desc="width attribute changes">
<img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="width property changes">
<div style="width: 2px">
<img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 100%" loading="lazy" data-desc="percentage width, CB width changes">
</div>
<img srcset="/images/green-2x2.png 2w" sizes="auto" style="height: 2px; aspect-ratio: 2 / 2" loading="lazy" data-desc="height property changes (with aspect-ratio)">
<img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="being rendered changes">
<!-- should not invoke update the image data -->
<img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="loading attribute state changes">
<img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="display property changes to inline-block">
<img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="loading attribute changes to LAZY">
<script>
const rAF = () => new Promise(resolve => requestAnimationFrame(resolve));
onload = async function() {
await rAF();
await rAF();
// lazy-loaded images should have fired their first 'load' event at this point.
t('width attribute changes', function(img) {
img.width = '4';
}, 'load');
t('width property changes', function(img) {
img.style.width = '4px';
}, 'timeout');
t('percentage width, CB width changes', function(img) {
img.parentNode.style.width = '4px';
}, 'timeout');
t('height property changes (with aspect-ratio)', function(img) {
img.style.height = '4px';
}, 'timeout');
t('loading attribute state changes', function(img) {
img.loading = 'eager';
}, 'timeout');
t('being rendered changes', function(img) {
img.style.display = 'none';
}, 'timeout');
t('display property changes to inline-block', function(img) {
img.style.display = 'inline-block';
}, 'timeout');
t('loading attribute changes to LAZY', function(img) {
img.setAttribute('loading', 'LAZY');
}, 'timeout');
done();
};
</script>
|
