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/resized-image-not-reconsidered.html - WPT Dashboard Interop Dashboard
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Resized Image Is Not Reconsidered as LCP.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<img src='/images/lcp-256x256.png' id='image_id' height="100" width="50" />
<script>
let image_id = 'image_id';
// Create a promise that resolves when an LCP is observed.
const lcp_observation_promise = image_src => {
return new Promise(resolve => {
new PerformanceObserver((entryList) => {
let lcpEntries = entryList.getEntries().filter(e => e.id == image_id);
if (lcpEntries) {
resolve(lcpEntries);
}
}).observe({ type: 'largest-contentful-paint', buffered: true });
});
}
promise_test(async t => {
const lcpEntriesInitial = await lcp_observation_promise();
assert_equals(lcpEntriesInitial.length, 1);
// Resize image.
document.getElementById('image_id').height = 150;
// Wait for a repaint.
const lcpEntriesAfterImageResizing =
await new Promise(resolve => {
t.step_timeout(window.requestAnimationFrame(async () => {
resolve(await lcp_observation_promise());
}), 100);
});
// No additional LCP entry is emitted after the image is resized to be larger.
assert_equals(lcpEntriesAfterImageResizing.length, 1);
assert_true(lcpEntriesInitial[0] === lcpEntriesAfterImageResizing[0]);
}, "Resized image should not be reconsidered as LCP");
</script>
</body>