placeholder-image.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /largest-contentful-paint/placeholder-image.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<meta charset=utf-8>

<title>Largest Contentful Paint: src change triggers new entry.</title>

<body>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="resources/largest-contentful-paint-helpers.js"></script>

<img src='/images/lcp-1x1.png' id='image_id' width="133" height="106"/>

<script>

  async_test(function (t) {

    assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");

    let beforeLoad = performance.now();

    document.getElementById('image_id').src = '/images/lcp-133x106.png';

    const url = window.location.origin + '/images/lcp-133x106.png';

    const observer = new PerformanceObserver(

      t.step_func(function(entryList) {

        let entries = entryList.getEntries().filter(e => e.url === url);

        if (entries.length === 0)

          return;

        assert_equals(entries.length, 1);

        const entry = entries[0];

        const size = 133 * 106;

        checkImage(entry, url, 'image_id', size, beforeLoad);

        t.done();

})

);

    observer.observe({type: 'largest-contentful-paint', buffered: true});

  }, 'Largest Contentful Paint: changing src causes a new entry to be dispatched.');

</script>

</body>