<!DOCTYPE html>
<meta charset="utf-8">
<title>LargestContentfulPaint entries should generate for updates to previous LargestContentfulPaint nodes.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<body>
  <script>
    promise_test(() => {
      assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
      let countLcp = 0;
      let firstLcp = null;
      const timeoutPromise = new Promise(resolve => step_timeout(() => {
        resolve(new Error('Did not observe two LCP entries'))
      }, 3 * 1000));
      const testPromise = new Promise(resolve => {
        new PerformanceObserver(list => {
          const entries = list.getEntries();
          for (const entry of entries) {
            ++countLcp;
            assert_equals(entry.entryType, 'largest-contentful-paint');
            assert_equals(entry.id, 'text');
            if (countLcp == 1) {
              firstLcp = entry;
            } else if (countLcp == 2) {
              assert_more_than(entry.startTime, firstLcp.startTime);
              assert_more_than(entry.size, firstLcp.size);
              resolve();
            }
          }
        }).observe({ entryTypes: ['largest-contentful-paint'] });
      });
      return Promise.race([timeoutPromise, testPromise]);
    })
  </script>
  <div id="text">text</div>
  <link rel="stylesheet" href="/resources/slow-style-change.py">
</body>
