1 files changed, 48 insertions, 0 deletions
diff --git a/testing/web-platform/tests/largest-contentful-paint/transparent-text.html b/testing/web-platform/tests/largest-contentful-paint/transparent-text.html
new file mode 100644
index 0000000000..9eb978ab5c
--- /dev/null
+++ b/testing/web-platform/tests/largest-contentful-paint/transparent-text.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<!--
+  Transparent text should not be eligible for LCP.
+-->
+<style>
+  .large-transparent {
+    font-size: 2000px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+    color: transparent;
+    z-index: -999;
+  }
+</style>
+
+<body>
+  <img src='/images/lcp-133x106.png' id='lcp' />
+  <p id="fake_lcp" class='large-transparent'>fake LCP</p>
+
+  <script>
+    const LcpEntryListPromise = (t) => {
+      return new Promise(resolve => {
+        new PerformanceObserver((entryList, observer) => {
+          if (entryList.getEntries().length > 0) {
+            resolve(entryList.getEntries());
+
+            observer.disconnect();
+          }
+        }).observe({ type: 'largest-contentful-paint', buffered: true });
+      });
+    }
+
+    promise_test(async t => {
+      assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
+
+      lcpEntries = await LcpEntryListPromise();
+
+      assert_equals(lcpEntries.length, 1, "There should only be 1 entry.");
+
+      assert_true(lcpEntries[0].url.includes('lcp-133x106.png'), "The LCP entry should be the image.");
+    }, "Transparent text should not be LCP.")
+  </script>
+</body>
+\ No newline at end of file