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:
- /largest-contentful-paint/background-image-set-image.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>Background image-set images should be LCP candidates</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.background {
width: calc(100vw - 40px);
height: calc(100vw - 40px);
max-width: 100px;
max-height: 100px;
background: #eee image-set("/images/lcp-100x50.png" type("image/png")) center center no-repeat;
background-size: cover;
}
</style>
<body>
<div class="background"></div>
<p>fallback</p>
</body>
<script>
promise_test(async (t) => {
await Promise.race([
new Promise((resolve) => {
const entries = [];
new PerformanceObserver((list) => {
entries.push(...list.getEntries());
for (const entry of entries) {
if (entry.url.includes("lcp-100x50")) {
resolve(entry.url);
return;
}
}
}).observe({ type: "largest-contentful-paint", buffered: true });
}),
new Promise((resolve, reject) => {
t.step_timeout(() => {
reject(new Error("Timed out waiting for LCP entry for background image-set image."));
}, 3000);
}),
]);
}, "Background image-set images should be eligible for LCP candidates");
</script>