Add a test for setting .src then .loading = "lazy", ensuring load is …

…not sync. src-then-lazy-load.html passes in Chromium which means that the initial diagnostic wasn't quite accurate. (you can test that by adding a dummy random query string somewhere in the original test-case from the blocked bug). I still think the test is still probably worth landing. Add a test for out of band loads somehow triggering lazy loads, see linked spec issue. Differential Revision: https://phabricator.services.mozilla.com/D226706 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1926666 gecko-commit: bc523d3640536476fa895d1e598a3c5c0c9bf614 gecko-reviewers: jrmuizel
web-platform-tests · Oct 24, 2024 · 63e7ab0 · 63e7ab0
1 parent de38c32
commit 63e7ab0
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/...mantics/embedded-content/the-img-element/update-the-image-data/lazy-out-of-band-load.html b/...mantics/embedded-content/the-img-element/update-the-image-data/lazy-out-of-band-load.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<title>Lazy loaded image doesn't get loaded eagerly after another image gets loaded with the same source</title>
+<link rel="help" href="https://github.com/whatwg/html/issues/10671">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+async function run_test(prop, image, t) {
+  let value = `${image}?lazy-out-of-band-load-` + Math.random();
+  let img = document.createElement("img")
+  img[prop] = value;
+  img.loading = "lazy";
+  img.style.display = "none";
+  img.addEventListener("error", t.unreached_func("error: should never try to load"));
+  img.addEventListener("load", t.unreached_func("load: should never try to load"));
+  document.body.appendChild(img);
+
+  await new Promise(r => t.step_timeout(r, 100));
+
+  // now load another image with the same src, but not lazy.
+  img = document.createElement("img");
+  img[prop] = value;
+
+  await new Promise(r => {
+    img.addEventListener("load", r, { once: true });
+    img.addEventListener("error", r, { once: true });
+    document.body.appendChild(img);
+  });
+
+  // Wait a bit to make sure we don't get a broken load.
+  await new Promise(r => t.step_timeout(r, 100));
+}
+
+for (let prop of ["src", "srcset"]) {
+  for (let path of ["/images/green.png", "/images/not-found"]) {
+    promise_test(t => run_test(prop, path, t), `${prop} = ${path}`);
+  }
+}
+</script>
diff --git a/.../semantics/embedded-content/the-img-element/update-the-image-data/src-then-lazy-load.html b/.../semantics/embedded-content/the-img-element/update-the-image-data/src-then-lazy-load.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<title>Image shouldn't load synchronously out of the document.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+async function run_test(prop, image, repetitions, t) {
+  for (let i = 0; i < repetitions; ++i) {
+    let img = document.createElement("img")
+    img[prop] = `${image}?src-then-lazy-load-` + Math.random();
+    img.loading = "lazy";
+    img.style.display = "none";
+    img.addEventListener("error", t.unreached_func("error: should never try to load"));
+    img.addEventListener("load", t.unreached_func("load: should never try to load"));
+    document.body.appendChild(img);
+    await new Promise(r => t.step_timeout(r, 500));
+  }
+}
+
+for (let prop of ["src", "srcset"]) {
+  for (let path of ["/images/green.png", "/images/not-found"]) {
+    for (let repetitions of [1, 2]) {
+      promise_test(t => run_test(prop, path, repetitions, t), `${prop} = ${path} ${repetitions} time(s)`);
+    }
+  }
+}
+</script>