resized-image-not-reconsidered.html (1881B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <title>Resized Image Is Not Reconsidered as LCP.</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <body> 8 <img src="/images/lcp-256x256.png" id="testpic" height="100" width="50" /> 9 <script> 10 promise_test(async (t) => { 11 // Set up an observer that looks for LCP entries for the testpic, 12 // identified by its id. 13 const entries = []; 14 const observer = new PerformanceObserver((l) => { 15 entries.push(...l.getEntries().filter((e) => e.id == "testpic")); 16 }); 17 observer.observe({ type: "largest-contentful-paint", buffered: true }); 18 19 // Wait for the initial LCP entry to be emitted, and verify it's as expected. 20 await t.step_wait(() => entries.length > 0, "Waiting for initial LCP entry to be emitted."); 21 assert_equals(entries.length, 1); 22 assert_equals(entries[0].id, "testpic"); 23 assert_equals(entries[0].size, 100 * 50); 24 25 // Now resize image, then wait, then observe that no additional 26 // entries are emitted. 27 document.getElementById("testpic").height = 150; 28 29 // Wait for the image to be resized - after a requestAnimationFrame 30 // cycle and 1 second, disconnect the observer. 31 await new Promise((resolve) => { 32 requestAnimationFrame(() => { 33 t.step_timeout(() => { 34 observer.disconnect(); 35 resolve(); 36 }, 1000); 37 }); 38 }); 39 40 // Verify that the image was not reconsidered as LCP: it's still 41 // the same entry, reflecting the initial size with width and height from 42 // the img tag. 43 assert_equals(entries.length, 1); 44 assert_equals(entries[0].id, "testpic"); 45 assert_equals(entries[0].size, 100 * 50); 46 }, "Resized image should not be reconsidered as LCP"); 47 </script> 48 </body>