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>