Don't update LCP for video elements switching from poster.

A video element whose rendered contents are a poster image will have a different MediaTiming than when it's contents are the video itself. However, that different object will cause the MediaRecordId to be different, and so the same element can create two distinct LCP candidate records. This change forces the MediaRecordId to not consider the MediaTiming object when calculating the hash for a video element. Bug: 330202431 Change-Id: I56b8c8d54c1a3d64138f8de529fe15695b1df952 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5970217 Reviewed-by: Hao Liu <[email protected]> Commit-Queue: Ian Clelland <[email protected]> Cr-Commit-Position: refs/heads/main@{#1378586}
web-platform-tests · Nov 5, 2024 · 5fe6c1e · 5fe6c1e
1 parent 0a5ba65
commit 5fe6c1e
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/largest-contentful-paint/video-play-after-poster.html b/largest-contentful-paint/video-play-after-poster.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+<title>This test verifies a video element only triggers a single LCP entry</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<body>
+  <video muted src="/images/pattern.webm" poster="/images/lcp-16x16.png" width="600"></video>
+  <script>
+    const lcp_entries = [];
+    let unread_lcp_index = 0;
+    let lcp_resolver = null;
+
+    new PerformanceObserver((list, observer) => {
+      for (const entry of list.getEntries()) {
+        lcp_entries.push(entry);
+      }
+      // If we're currently waiting for an LCP entry, consume it now.
+      if (lcp_resolver) {
+        lcp_resolver();
+      }
+    }).observe({ type: "largest-contentful-paint", buffered: true });
+
+    get_lcp_entry = async () => {
+      // If there are no unread LCP entries, wait for one to show up.
+      if (unread_lcp_index == lcp_entries.length) {
+        await new Promise((resolve) => { lcp_resolver = resolve; });
+        lcp_resolver = null;
+      }
+      // Return the next unread entry.
+      unread_lcp_index++;
+      return lcp_entries[unread_lcp_index-1];
+    };
+
+    promise_test(async t => {
+      // Ensure that the first LCP is the poster image.
+      lcpEntry = await get_lcp_entry();
+      assert_true(lcpEntry.url.endsWith('lcp-16x16.png'), "LCP Entry should be poster, but we got " + lcpEntry.url);
+
+      // Start the video.
+      document.querySelector('video').play();
+
+      // Race a task to get a second LCP entry with a 500ms timeout.
+      const second_lcpEntry = await Promise.race([
+        new Promise(resolve => { t.step_timeout(() => resolve('TIMEOUT'), 500); }),
+        get_lcp_entry()
+      ]);
+      assert_equals(second_lcpEntry, 'TIMEOUT', "There should be no further LCP entry, but we got " + second_lcpEntry.url);
+    }, "Video with poster should not emit a second LCP entry after playing.")
+  </script>
+</body>
+
+</html>