summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/largest-contentful-paint/initially-invisible-images.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/largest-contentful-paint/initially-invisible-images.html
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/largest-contentful-paint/initially-invisible-images.html')
-rw-r--r--testing/web-platform/tests/largest-contentful-paint/initially-invisible-images.html62
1 files changed, 62 insertions, 0 deletions
diff --git a/testing/web-platform/tests/largest-contentful-paint/initially-invisible-images.html b/testing/web-platform/tests/largest-contentful-paint/initially-invisible-images.html
new file mode 100644
index 0000000000..d0bede6761
--- /dev/null
+++ b/testing/web-platform/tests/largest-contentful-paint/initially-invisible-images.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<head>
+<title>Largest Contentful Paint: initially out-of-viewport image gets an LCP entry once they are visible.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+ .flex-container {
+ display: flex;
+ flex-direction: row;
+ width: 1000px;
+ overflow-x: hidden;
+ scroll-behavior: auto;
+ }
+</style>
+</head>
+<body>
+<div>
+<div class='flex-container' id="container">
+ <img src='/images/yellow.png?pipe=trickle(d1)' width="1000" height="1000"/>
+ <img src='/images/green-1x1.png?1' width="1000" height="1000"/>
+ <img src='/images/green-1x1.png?2' width="1000" height="1000"/>
+ <img src='/images/green-1x1.png?3' width="1000" height="1000"/>
+</div>
+</div>
+<script>
+// Spin the carousel
+const images = document.querySelectorAll('img');
+
+let selected = 0;
+const container = document.getElementById("container");
+const transition = () => {
+ container.scrollLeft = selected * 1000;
+ selected = (selected + 1) % images.length;
+}
+
+container.scrollLeft=1000;
+setInterval(transition, 1000);
+
+promise_test(async t => {
+
+ return new Promise(resolve => {
+ assert_implements(window.LargestContentfulPaint,
+ "LargestContentfulPaint is not implemented");
+ const observer = new PerformanceObserver(entryList => {
+ entryList.getEntries().forEach(entry => {
+ // May receive a text entry. Ignore that entry.
+ if (!entry.url) {
+ return;
+ }
+ assert_true(entry.url.includes("yellow.png"), "Re-visible image has an entry");
+ resolve();
+ });
+ });
+ observer.observe({type: 'largest-contentful-paint', buffered: true});
+ t.step_timeout(() => {
+ assert_unreached("The image should have become visible by now, which should have triggered an LCP entry.");
+ t.done();
+ }, 2000);
+ });
+}, 'Image visibility: out-of-viewport images are observable by LargestContentfulPaint once they become visible.');
+</script>
+</body>