diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/html/semantics/embedded-content/the-img-element/relevant-mutations-lazy.html | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/semantics/embedded-content/the-img-element/relevant-mutations-lazy.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/embedded-content/the-img-element/relevant-mutations-lazy.html | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/relevant-mutations-lazy.html b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/relevant-mutations-lazy.html new file mode 100644 index 0000000000..d3784671b8 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/relevant-mutations-lazy.html @@ -0,0 +1,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> |