Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Avoid firing LCP triggered after mouseover over LCP element.
This CL adds a flag that turns off LCP entries that are loaded right after a mouseover event on a previous LCP element. The flag is currently disabled by default. Bug: 1288027 Change-Id: Idd8c1d47ad4a3bb91cc583b89ab4d68f08213ff4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4061623 Reviewed-by: Koji Ishii <kojii@chromium.org> Reviewed-by: Ian Clelland <iclelland@chromium.org> Commit-Queue: Yoav Weiss <yoavweiss@chromium.org> Cr-Commit-Position: refs/heads/main@{#1077459}
- Loading branch information
Yoav Weiss
authored and
Chromium LUCI CQ
committed
Nov 30, 2022
1 parent
ae67301
commit bdcef78
Showing
12 changed files
with
290 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
...ests/external/wpt/largest-contentful-paint/mouseover-heuristics-background.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>LCP mouseover heuristics ignore background-based zoom widgets</title> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/resources/testdriver.js"></script> | ||
| <script src="/resources/testdriver-actions.js"></script> | ||
| <script src="/resources/testdriver-vendor.js"></script> | ||
| <script src="resources/mouseover-utils.js"></script> | ||
| </head> | ||
| <body> | ||
| <img src="/images/green-16x16.png" id=image> | ||
| <span id=span style="display: inline-block;width: 15px; height: 15px"></span> | ||
| <script> | ||
| run_mouseover_test(/*background=*/true); | ||
| </script> | ||
| </body> | ||
|
|
18 changes: 18 additions & 0 deletions
18
...b_tests/external/wpt/largest-contentful-paint/mouseover-heuristics-element.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>LCP mouseover heuristics ignore element-based zoom widgets</title> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/resources/testdriver.js"></script> | ||
| <script src="/resources/testdriver-actions.js"></script> | ||
| <script src="/resources/testdriver-vendor.js"></script> | ||
| <script src="resources/mouseover-utils.js"></script> | ||
| </head> | ||
| <body> | ||
| <img src="/images/green-16x16.png" id=image> | ||
| <span id=span style="display: inline-block;width: 15px; height: 15px"></span> | ||
| <script> | ||
| run_mouseover_test(/*background=*/false); | ||
| </script> | ||
| </body> |
128 changes: 128 additions & 0 deletions
128
..._party/blink/web_tests/external/wpt/largest-contentful-paint/resources/mouseover-utils.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 in 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`); | ||
| } |
1 change: 1 addition & 0 deletions
1
third_party/blink/web_tests/virtual/lcp-mouseover-heuristics/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| A virtual test suite for LCP's mouseover heuristics, which are not yet at the experimental stage. |