From 721cf98486a73b953e5f8669388a3289938b5aa3 Mon Sep 17 00:00:00 2001
From: Halil Durak <halildrk@gmail.com>
Date: Wed, 25 Feb 2026 16:35:21 +0300
Subject: [PATCH] update `Image` and `Style` tests

---
 src/browser/tests/element/html/image.html | 78 ++++++++++-------------
 src/browser/tests/element/html/style.html | 25 ++++++++
 2 files changed, 60 insertions(+), 43 deletions(-)
diff --git a/src/browser/tests/element/html/image.html b/src/browser/tests/element/html/image.html
index e7868229..92cd947d 100644
--- a/src/browser/tests/element/html/image.html
+++ b/src/browser/tests/element/html/image.html
@@ -114,48 +114,15 @@
 }
 </script>
 
-<script id="load-trigger-event">
+<body></body>
+
+<script id="img-load-event">
 {
+  // An img fires a load event when src is set.
   const img = document.createElement("img");
-  let count = 0;
-  img.addEventListener("load", ({ bubbles, cancelBubble, cancelable, composed, isTrusted, target }) => {
-    testing.expectEqual(true, count < 3);
-    count++;
-
-    testing.expectEqual(false, bubbles);
-    testing.expectEqual(false, cancelBubble);
-    testing.expectEqual(false, cancelable);
-    testing.expectEqual(false, composed);
-    testing.expectEqual(true, isTrusted);
-    testing.expectEqual(img, target);
-  });
-
-  for (let i = 0; i < 3; i++) {
-    img.src = "https://cdn.lightpanda.io/website/assets/images/docs/hn.png";
-    testing.expectEqual("https://cdn.lightpanda.io/website/assets/images/docs/hn.png", img.src);
-  }
-
-  // Make sure count is incremented asynchronously.
-  testing.expectEqual(0, count);
-}
-</script>
-
-<img
-  id="inline-img"
-  src="https://cdn.lightpanda.io/website/assets/images/docs/hn.png"
-  onload="(() => testing.expectEqual(true, true))()"
-/>
-
-<script id="inline-on-load">
-{
-  const img = document.getElementById("inline-img");
-  testing.expectEqual(true, img.onload instanceof Function);
-  // Also call inline to double check.
-  img.onload();
-
-  // Make sure ones attached with `addEventListener` also executed.
+  let result = false;
   testing.async(async () => {
-    const result = await new Promise(resolve => {
+    await new Promise(resolve => {
       img.addEventListener("load", ({ bubbles, cancelBubble, cancelable, composed, isTrusted, target }) => {
         testing.expectEqual(false, bubbles);
         testing.expectEqual(false, cancelBubble);
@@ -163,13 +130,38 @@
         testing.expectEqual(false, composed);
         testing.expectEqual(true, isTrusted);
         testing.expectEqual(img, target);
-
-        return resolve(true);
+        result = true;
+        return resolve();
       });
+      img.src = "https://cdn.lightpanda.io/website/assets/images/docs/hn.png";
     });
-
-    testing.expectEqual(true, result);
   });
+
+  testing.eventually(() => testing.expectEqual(true, result));
+}
+</script>
+
+<script id="img-no-load-without-src">
+{
+  // An img without src should not fire a load event.
+  let fired = false;
+  const img = document.createElement("img");
+  img.addEventListener("load", () => { fired = true; });
+  document.body.appendChild(img);
+  testing.eventually(() => testing.expectEqual(false, fired));
+}
+</script>
+
+<script id="lazy-src-set">
+{
+  // Append to DOM first, then set src — load should still fire.
+  const img = document.createElement("img");
+  let result = false;
+  img.onload = () => result = true;
+  document.body.appendChild(img);
+  img.src = "https://cdn.lightpanda.io/website/assets/images/docs/hn.png";
+
+  testing.eventually(() => testing.expectEqual(true, result));
 }
 </script>
 
diff --git a/src/browser/tests/element/html/style.html b/src/browser/tests/element/html/style.html
index 713d8e2e..8abbb229 100644
--- a/src/browser/tests/element/html/style.html
+++ b/src/browser/tests/element/html/style.html
@@ -106,3 +106,28 @@
     testing.expectEqual(true, style.disabled);
   }
 </script>
+
+<script id="style-load-event">
+{
+  // A style element fires a load event when appended to the DOM.
+  const style = document.createElement("style");
+  let result = false;
+  testing.async(async () => {
+    await new Promise(resolve => {
+      style.addEventListener("load", ({ bubbles, cancelBubble, cancelable, composed, isTrusted, target }) => {
+        testing.expectEqual(false, bubbles);
+        testing.expectEqual(false, cancelBubble);
+        testing.expectEqual(false, cancelable);
+        testing.expectEqual(false, composed);
+        testing.expectEqual(true, isTrusted);
+        testing.expectEqual(style, target);
+        result = true;
+        return resolve();
+      });
+      document.head.appendChild(style);
+    });
+  });
+
+  testing.eventually(() => testing.expectEqual(true, result));
+}
+</script>
