diff options
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.js | 128 |
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`); +} |