Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 8 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/the-img-element/relevant-mutations-lazy.html - WPT Dashboard Interop Dashboard
<!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 -->
<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>