summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/largest-contentful-paint/resources/mouseover-utils.js
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/resources/mouseover-utils.js
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/resources/mouseover-utils.js')
-rw-r--r--testing/web-platform/tests/largest-contentful-paint/resources/mouseover-utils.js128
1 files changed, 128 insertions, 0 deletions
diff --git a/testing/web-platform/tests/largest-contentful-paint/resources/mouseover-utils.js b/testing/web-platform/tests/largest-contentful-paint/resources/mouseover-utils.js
new file mode 100644
index 0000000000..1836f2e4ad
--- /dev/null
+++ b/testing/web-platform/tests/largest-contentful-paint/resources/mouseover-utils.js
@@ -0,0 +1,128 @@
+let counter = 0;
+const loadImage = size => {
+ return event => {
+ let zoom;
+ if (location.search.includes("replace")) {
+ zoom = document.getElementById("image");
+ } else {
+ zoom = new Image();
+ }
+ zoom.src=`/images/green-${size}.png`;
+ ++counter;
+ zoom.elementTiming = "zoom" + counter;
+ document.body.appendChild(zoom);
+ }
+};
+const loadBackgroundImage = size => {
+ return event => {
+ const div = document.createElement("div");
+ const [width, height] = size.split("x");
+ ++counter;
+ div.style = `background-image:
+ url(/images/green-${size}.png?${counter}); width: ${width}px; height: ${height}px`;
+ div.elementTiming = "zoom" + counter;
+ document.body.appendChild(div);
+ }
+};
+
+const registerMouseover = background => {
+ const image = document.getElementById("image");
+ const span = document.getElementById("span");
+ const func = background ? loadBackgroundImage : loadImage;
+ image.addEventListener("mouseover", func("100x50"));
+ span.addEventListener("mouseover", func("256x256"));
+}
+
+const dispatch_mouseover = () => {
+ span.dispatchEvent(new Event("mouseover"))
+};
+
+const wait_for_lcp_entries = async entries_expected => {
+ await new Promise(resolve => {
+ let entries_seen = 0;
+ const PO = new PerformanceObserver(list => {
+ const entries = list.getEntries();
+ for (let entry of entries) {
+ if (entry.url) {
+ entries_seen++;
+ }
+ }
+ if (entries_seen == entries_expected) {
+ PO.disconnect();
+ resolve()
+ } else if (entries_seen > entries_expected) {
+ PO.disconnect();
+ reject();
+ }
+ });
+ PO.observe({type: "largest-contentful-paint", buffered: true});
+ });
+};
+const wait_for_element_timing_entry = async identifier => {
+ await new Promise(resolve => {
+ const PO = new PerformanceObserver(list => {
+ const entries = list.getEntries();
+ for (let entry of entries) {
+ if (entry.identifier == identifier) {
+ PO.disconnect();
+ resolve()
+ }
+ }
+ });
+ PO.observe({type: "element", buffered: true});
+ });
+};
+const wait_for_resource_timing_entry = async name => {
+ await new Promise(resolve => {
+ const PO = new PerformanceObserver(list => {
+ const entries = list.getEntries();
+ for (let entry of entries) {
+ if (entry.name.includes(name)) {
+ PO.disconnect();
+ resolve()
+ }
+ }
+ });
+ PO.observe({type: "resource", buffered: true});
+ });
+};
+
+const run_mouseover_test = background => {
+ promise_test(async t => {
+ // await the first LCP entry
+ await wait_for_lcp_entries(1);
+ // Hover over the image
+ registerMouseover(background);
+ if (test_driver) {
+ await new test_driver.Actions().pointerMove(0, 0, {origin: image}).send();
+ }
+ if (!background) {
+ await wait_for_element_timing_entry("zoom1");
+ } else {
+ await wait_for_resource_timing_entry("png?1");
+ await new Promise(r => requestAnimationFrame(r));
+ }
+ // There's only a single LCP entry, because the zoom was skipped.
+ await wait_for_lcp_entries(1);
+
+ // Wait 600 ms as the heuristic is 500 ms.
+ // This will no longer be necessary once the heuristic relies on Task
+ // Attribution.
+ await new Promise(r => step_timeout(r, 600));
+
+ // Hover over the span.
+ if (test_driver) {
+ await new test_driver.Actions().pointerMove(0, 0, {origin: span}).send();
+ }
+ if (!background) {
+ await wait_for_element_timing_entry("zoom2");
+ } else {
+ await wait_for_resource_timing_entry("png?2");
+ await new Promise(r => requestAnimationFrame(r));
+ }
+ // There are 2 LCP entries, as the image loaded due to span hover is a
+ // valid LCP candidate.
+ await wait_for_lcp_entries(2);
+ }, `LCP mouseover heuristics ignore ${background ?
+ "background" : "element"}-based zoom widgets`);
+}