1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!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>
|
