Bug 1929364 [wpt PR 48982] - Don't update LCP for video elements switching from poster., a=testonly

clelland · moz-wptsync-bot · commit d0dd287dc947 · 2024-11-06T15:05:35.000Z
Automatic update from web-platform-tests 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 <haoliuk@chromium.org> Commit-Queue: Ian Clelland <iclelland@chromium.org> Cr-Commit-Position: refs/heads/main@{#1378586} -- wpt-commits: 5fe6c1e7f9ee16db7756262fd2a71232bc9b4d1d wpt-pr: 48982
diff --git a/testing/web-platform/tests/largest-contentful-paint/video-play-after-poster.html b/testing/web-platform/tests/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>
