resized-image-not-reconsidered.html

<!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>
chromium/third_party/blink/web_tests/external/wpt/largest-contentful-paint/resized-image-not-reconsidered.html
