update Image and Style tests

This commit is contained in:
Halil Durak
2026-02-25 16:35:21 +03:00
parent 84bbb6efd4
commit 721cf98486
2 changed files with 60 additions and 43 deletions

View File

@@ -114,48 +114,15 @@
} }
</script> </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"); const img = document.createElement("img");
let count = 0; let result = false;
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.
testing.async(async () => { testing.async(async () => {
const result = await new Promise(resolve => { await new Promise(resolve => {
img.addEventListener("load", ({ bubbles, cancelBubble, cancelable, composed, isTrusted, target }) => { img.addEventListener("load", ({ bubbles, cancelBubble, cancelable, composed, isTrusted, target }) => {
testing.expectEqual(false, bubbles); testing.expectEqual(false, bubbles);
testing.expectEqual(false, cancelBubble); testing.expectEqual(false, cancelBubble);
@@ -163,13 +130,38 @@
testing.expectEqual(false, composed); testing.expectEqual(false, composed);
testing.expectEqual(true, isTrusted); testing.expectEqual(true, isTrusted);
testing.expectEqual(img, target); testing.expectEqual(img, target);
result = true;
return resolve(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> </script>

View File

@@ -106,3 +106,28 @@
testing.expectEqual(true, style.disabled); testing.expectEqual(true, style.disabled);
} }
</script> </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>