Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/the-video-element/video-loading-lazy-poster-when-visible.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.below-viewport {
margin-top: 1000vh;
}
</style>
<body>
<script>
const t = async_test(
"Video with loading=lazy does not fetch poster while not visible, then fetches poster once scrolled into view"
);
const video = document.createElement("video");
video.loading = "lazy";
video.poster = "/media/2048x1360-random.jpg?t=" + Date.now();
video.className = "below-viewport";
const posterUrl = new URL(video.poster, location.href).href;
let posterEntries = [];
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === posterUrl) {
posterEntries.push(entry);
}
}
});
observer.observe({ entryTypes: ["resource"] });
document.body.appendChild(video);
// Step 1: Not visible => check that poster hasn't loaded.
const step1Start = performance.now();
t.step_wait_func(
() => posterEntries.length > 0 || performance.now() - step1Start > 300,
() => {
assert_equals(posterEntries.length, 0, "Poster should not be fetched when not visible");
// Step 2: Scroll into view => poster should load.
const entriesBeforeScroll = posterEntries.length;
video.scrollIntoView();
t.step_wait_func_done(
() => posterEntries.length > entriesBeforeScroll,
() => observer.disconnect(),
"Poster should be fetched after scrolling into view",
3000,
50
);
},
"Wait for initial poster fetch opportunity while offscreen",
1000,
50
);
</script>
</body>