-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Reland "[LCP] Add animated image support"
This is a reland of b7d510c06e0436cfb4bd7260175cd460b949225c Original change's description: > [LCP] Add animated image support > > This CL adds support for better handling of animated images in LCP: > * A new attribute is exposing the first animated frame's paint time > (behind a flag). > * `startTime` is not changed. > * The PageLoadMetrics reported for LCP are set to that first frame paint > time for animated images (behind another flag). > * Entries are not emitted until the image is loaded. > > Relevant spec issue: > w3c/largest-contentful-paint#83 > > Change-Id: I6bb01eacb4f200f9c032ffcfcd9a1a41126a7773 > Bug: 1260953 > Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3226157 > Commit-Queue: Yoav Weiss <[email protected]> > Reviewed-by: Nicolás Peña Moreno <[email protected]> > Cr-Commit-Position: refs/heads/main@{#935133} Bug: 1260953 Change-Id: I5eaaf0cfd1daa7fb905e68aed4994cb931dc7750
- Loading branch information
1 parent
a8e7d29
commit fbf514e
Showing
10 changed files
with
204 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,2 @@ | ||
Timing-Allow-Origin: * | ||
|
Binary file not shown.
27 changes: 27 additions & 0 deletions
27
largest-contentful-paint/animated/observe-animated-image-gif.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,27 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta charset=utf-8> | ||
<title>Largest Contentful Paint: observe image.</title> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="../resources/largest-contentful-paint-helpers.js"></script> | ||
</head> | ||
<body> | ||
<script> | ||
promise_test(async () => { | ||
assert_implements(window.LargestContentfulPaint, | ||
"LargestContentfulPaint is not implemented"); | ||
const beforeLoad = performance.now(); | ||
// 136 is the size of the animated GIF up until the first frame. | ||
// The trickle pipe delays the response after the first frame by 1 second. | ||
const url = window.location.origin + | ||
`/images/anim-gr.gif?pipe=trickle(136:d${delay_pipe_value})`; | ||
const entry = await load_and_observe(url); | ||
// anim-gr.gif is 100 by 50. | ||
const size = 100 * 50; | ||
checkImage(entry, url, 'image_id', size, beforeLoad, ["animated"]); | ||
}, "Same origin animated image is observable and has a first frame."); | ||
</script> | ||
</body> | ||
</html> |
27 changes: 27 additions & 0 deletions
27
largest-contentful-paint/animated/observe-animated-image-webp.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,27 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta charset=utf-8> | ||
<title>Largest Contentful Paint: observe image.</title> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="../resources/largest-contentful-paint-helpers.js"></script> | ||
</head> | ||
<body> | ||
<script> | ||
promise_test(async () => { | ||
assert_implements(window.LargestContentfulPaint, | ||
"LargestContentfulPaint is not implemented"); | ||
const beforeLoad = performance.now(); | ||
// 142 is the size of the animated WebP up until the first frame. | ||
// The trickle pipe delays the response after the first frame by 1 second. | ||
const url = window.location.origin + | ||
`/images/webp-animated.webp?pipe=trickle(142:d${delay_pipe_value})`; | ||
const entry = await load_and_observe(url); | ||
// webp-animated.webp is 11 by 29. | ||
const size = 11 * 29; | ||
checkImage(entry, url, 'image_id', size, beforeLoad, ["animated"]); | ||
}, "Same origin animated image is observable and has a first frame."); | ||
</script> | ||
</body> | ||
</html> |
29 changes: 29 additions & 0 deletions
29
largest-contentful-paint/animated/observe-animated-image.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,29 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta charset=utf-8> | ||
<title>Largest Contentful Paint: observe image.</title> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="../resources/largest-contentful-paint-helpers.js"></script> | ||
</head> | ||
<body> | ||
<script> | ||
promise_test(async () => { | ||
assert_implements(window.LargestContentfulPaint, | ||
"LargestContentfulPaint is not implemented"); | ||
const beforeLoad = performance.now(); | ||
// 262 is the size of the animated PNG up until the first frame, | ||
// including the chunk that starts the second frame (indicating that | ||
// the first frame data is done). | ||
// The trickle pipe delays the response after the first frame by 1 second. | ||
const url = window.location.origin + | ||
`/images/anim-gr.png?pipe=trickle(262:d${delay_pipe_value})`; | ||
const entry = await load_and_observe(url); | ||
// anim-gr.png is 100 by 50. | ||
const size = 100 * 50; | ||
checkImage(entry, url, 'image_id', size, beforeLoad, ["animated"]); | ||
}, "Same origin animated image is observable and has a first frame."); | ||
</script> | ||
</body> | ||
</html> |
30 changes: 30 additions & 0 deletions
30
largest-contentful-paint/animated/observe-cross-origin-animated-image.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,30 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta charset=utf-8> | ||
<title>Largest Contentful Paint: observe image.</title> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="../resources/largest-contentful-paint-helpers.js"></script> | ||
<script src="/common/get-host-info.sub.js"></script> | ||
</head> | ||
<body> | ||
<script> | ||
promise_test(async () => { | ||
assert_implements(window.LargestContentfulPaint, | ||
"LargestContentfulPaint is not implemented"); | ||
const beforeLoad = performance.now(); | ||
// 262 is the size of the animated PNG up until the first frame, | ||
// including the chunk that starts the second frame (indicating that | ||
//the first frame data is done). | ||
const {REMOTE_ORIGIN} = get_host_info(); | ||
const url = REMOTE_ORIGIN + | ||
'/images/anim-gr.png?pipe=trickle(262:d1)'; | ||
const entry = await load_and_observe(url); | ||
// anim-gr.png is 100 by 50. | ||
const size = 100 * 50; | ||
checkImage(entry, url, 'image_id', size, beforeLoad, ["renderTimeIs0", "animated-zero"]); | ||
}, "Same origin animated image is observable and has a first frame."); | ||
</script> | ||
</body> | ||
</html> |
30 changes: 30 additions & 0 deletions
30
largest-contentful-paint/animated/observe-cross-origin-tao-animated-image.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,30 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta charset=utf-8> | ||
<title>Largest Contentful Paint: observe image.</title> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="../resources/largest-contentful-paint-helpers.js"></script> | ||
<script src="/common/get-host-info.sub.js"></script> | ||
</head> | ||
<body> | ||
<script> | ||
promise_test(async () => { | ||
assert_implements(window.LargestContentfulPaint, | ||
"LargestContentfulPaint is not implemented"); | ||
const beforeLoad = performance.now(); | ||
// 262 is the size of the animated PNG up until the first frame, | ||
// including the chunk that starts the second frame (indicating that | ||
//the first frame data is done). | ||
const {REMOTE_ORIGIN} = get_host_info(); | ||
const url = REMOTE_ORIGIN + | ||
'/images/anim-tao.png?pipe=trickle(262:d1)'; | ||
const entry = await load_and_observe(url); | ||
// anim-gr.png is 100 by 50. | ||
const size = 100 * 50; | ||
checkImage(entry, url, 'image_id', size, beforeLoad, ["animated"]); | ||
}, "Same origin animated image is observable and has a first frame."); | ||
</script> | ||
</body> | ||
</html> |
27 changes: 27 additions & 0 deletions
27
largest-contentful-paint/animated/observe-non-animated-image.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,27 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta charset=utf-8> | ||
<title>Largest Contentful Paint: observe image.</title> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="../resources/largest-contentful-paint-helpers.js"></script> | ||
</head> | ||
<body> | ||
<script> | ||
promise_test(async () => { | ||
assert_implements(window.LargestContentfulPaint, | ||
"LargestContentfulPaint is not implemented"); | ||
const beforeLoad = performance.now(); | ||
// 262 is the size of the animated PNG up until the first frame, | ||
// including the chunk that starts the second frame (indicating that | ||
//the first frame data is done). | ||
const url = window.location.origin + '/images/blue.png'; | ||
const entry = await load_and_observe(url); | ||
// blue.png is 133 by 106. | ||
const size = 133 * 106; | ||
checkImage(entry, url, 'image_id', size, beforeLoad, ["animated-zero"]); | ||
}, "Same origin animated image is observable and has a first frame."); | ||
</script> | ||
</body> | ||
</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