-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[soft-navigations] Take paint area into account
Currently, it's possible for a soft navigation to be triggered after a non-visual element was appended to the DOM. This CL modifies that, so that only if visual elements that comprise of at least 20% of the initial (hard navigation) paint area were appended to the DOM as a result of a user interaction, that would count as a soft navigation. Bug: 1479355 Change-Id: Id4609c6435c2ab3dde1a26fea14988e7cd171dad Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4846835 Reviewed-by: Ian Clelland <iclelland@chromium.org> Commit-Queue: Yoav Weiss <yoavweiss@chromium.org> Cr-Commit-Position: refs/heads/main@{#1207615}
- Loading branch information
1 parent
579206c
commit 1045599
Showing
8 changed files
with
320 additions
and
63 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
70 changes: 70 additions & 0 deletions
70
soft-navigation-heuristics/softnav-after-lcp-paint-larger-than-viewport.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,70 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/resources/testdriver.js"></script> | ||
| <script src="/resources/testdriver-vendor.js"></script> | ||
| <script src="/soft-navigation-heuristics/resources/soft-navigation-helper.js"></script> | ||
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
| </head> | ||
| <body> | ||
| <main id=main> | ||
| <div> | ||
| <a id=link><img id="initial_image1" src="/images/lcp-256x256.png?1" style="width: 90vw; height: 90vh"> | ||
| <div id=extra></div> | ||
| </a> | ||
| </div> | ||
| </main> | ||
| <script> | ||
| (async () => { | ||
| const link = document.getElementById("link"); | ||
|
|
||
| // Inject a second image that takes a large part of the viewport. | ||
| await new Promise(resolve => { | ||
| requestAnimationFrame(() => requestAnimationFrame(() => { | ||
| document.getElementById("extra").innerHTML = ` | ||
| <div style="position: absolute; bottom: 0; right: 0"> | ||
| <img id="initial_image2" src="/images/lcp-256x256.png?2" style="width: 90vw;height: 90vh"> | ||
| </div>`; | ||
| resolve(); | ||
| })); | ||
| }); | ||
| // Wait until the second image is rendered. | ||
| await new Promise(resolve => { | ||
| requestAnimationFrame(() => requestAnimationFrame(() => { | ||
| resolve(); | ||
| })); | ||
| }); | ||
| testSoftNavigation({ | ||
| addContent: async () => { | ||
| // Remove the initial image, so that the text would be painted on screen. | ||
| document.getElementById("initial_image1").remove(); | ||
| document.getElementById("initial_image2").remove(); | ||
| let lcp_element_painted; | ||
| const lcp_element_paint_promise = new Promise((r) => { lcp_element_painted = r; }); | ||
| // Add an LCP element, but have it be small enough to not trigger the | ||
| // Soft Navigation heuristics. | ||
| const p = addTextParagraphToMain( | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod", | ||
| /*element_timing=*/"lcp"); | ||
| (new PerformanceObserver(list => { | ||
| // Once the first element is fully painted: | ||
| lcp_element_painted(); | ||
| })).observe({type: "element", buffered: true}); | ||
| await lcp_element_paint_promise; | ||
| // Add a smaller element that gets us over that threshold. | ||
| addTextParagraphToMain("dolore magna aliqua."); | ||
| }, | ||
| link: link, | ||
| test: "Test that an image LCP followed by a smaller soft navigation LCP" | ||
| + " properly queues an LCP entry, even when the soft navigation is" | ||
| + " detected after the LCP, even when initial paints significantly" | ||
| + " exceed the viewport dimensions."}); | ||
| })(); | ||
| </script> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
42 changes: 42 additions & 0 deletions
42
soft-navigation-heuristics/softnav-after-lcp-paint.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,42 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Detect simple soft navigation.</title> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/resources/testdriver.js"></script> | ||
| <script src="/resources/testdriver-vendor.js"></script> | ||
| <script src="resources/soft-navigation-helper.js"></script> | ||
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
| </head> | ||
| <body> | ||
| <main id=main> | ||
| <div> | ||
| <a id=link><img src="/images/lcp-256x256.png"></a> | ||
| </div> | ||
| </main> | ||
| <script> | ||
| const link = document.getElementById("link"); | ||
| testSoftNavigation({ | ||
| addContent: async () => { | ||
| let lcp_element_painted; | ||
| const lcp_element_paint_promise = new Promise((r) => { lcp_element_painted = r; }); | ||
| // Add an LCP element, but have it be small enough to not trigger the | ||
| // Soft Navigation heuristics. | ||
| const p = addTextParagraphToMain("Lorem Ipsu", /*element_timing=*/"lcp"); | ||
| (new PerformanceObserver(list => { | ||
| // Once the first element is fully painted: | ||
| lcp_element_painted(); | ||
| })).observe({type: "element", buffered: true}); | ||
| await lcp_element_paint_promise; | ||
| // Add a smaller element that gets us over that threshold. | ||
| addTextParagraphToMain("m"); | ||
| }, | ||
| link: link, | ||
| test: "Test that an image LCP followed by a smaller soft navigation LCP" | ||
| + " properly queues an LCP entry, even when the soft navigation is" | ||
| + " detected after the LCP."}); | ||
| </script> | ||
| </body> | ||
| </html> |
52 changes: 52 additions & 0 deletions
52
soft-navigation-heuristics/softnav-before-lcp-paint.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,52 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Detect simple soft navigation.</title> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/resources/testdriver.js"></script> | ||
| <script src="/resources/testdriver-vendor.js"></script> | ||
| <script src="resources/soft-navigation-helper.js"></script> | ||
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
| </head> | ||
| <body> | ||
| <main id=main> | ||
| <div> | ||
| <a id=link><img src="/images/lcp-256x256.png"></a> | ||
| </div> | ||
| </main> | ||
| <script> | ||
| const link = document.getElementById("link"); | ||
| testSoftNavigation({ | ||
| addContent: async () => { | ||
| // Add an LCP element, large enough to trigger the Soft Navigation | ||
| // heuristics. | ||
| const p = addTextParagraphToMain("Lorem Ipsum", /*element_timing=*/"lcp"); | ||
| p.id = "first_lcp"; | ||
| // Once the first element is fully painted. | ||
| const observer = new PerformanceObserver(list => { | ||
| // Add a larger element to be the new LCP. | ||
| window.lcp_observer_promise = new Promise(resolve => { | ||
| (new PerformanceObserver(resolve)).observe({type: "element"}); | ||
| }); | ||
| const p2 = addTextParagraphToMain("LOREM IPSUMER", "real_lcp"); | ||
| p2.id = "real_lcp"; | ||
| observer.disconnect(); | ||
| }); | ||
| observer.observe({type: "element", buffered: true}); | ||
| }, | ||
| link: link, | ||
| validate: async () => { | ||
| await window.lcp_observer_promise; | ||
| const lcps = await getLcpEntries(); | ||
| assert_greater_than_equal(lcps.length, 3, "Got at least 3 LCP entries"); | ||
| assert_equals(lcps[lcps.length - 2].id, "first_lcp", "Got the first LCP"); | ||
| assert_equals(lcps[lcps.length - 1].id, "real_lcp", "Got the real LCP"); | ||
| }, | ||
| test: "Test that an image LCP followed by 2 smaller soft navigation LCPs" | ||
| + " properly queues both LCP entries, even when the soft navigation" | ||
| + " is detected in between them."}); | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.