From 5e22c43b5e65127fa859d2373fea522353c96de7 Mon Sep 17 00:00:00 2001 From: Yoav Weiss Date: Wed, 20 Oct 2021 04:22:57 -0700 Subject: [PATCH] [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: https://github.com/WICG/largest-contentful-paint/issues/83 This Change-Id: I6bb01eacb4f200f9c032ffcfcd9a1a41126a7773 Bug: 1260953 --- images/anim-tao.png | Bin 0 -> 460 bytes images/anim-tao.png.headers | 2 ++ .../observe-animated-image.tentative.html | 28 ++++++++++++++++ ...cross-origin-animated-image.tentative.html | 30 ++++++++++++++++++ ...s-origin-tao-animated-image.tentative.html | 30 ++++++++++++++++++ .../observe-non-animated-image.tentative.html | 27 ++++++++++++++++ .../largest-contentful-paint-helpers.js | 24 ++++++++++++++ 7 files changed, 141 insertions(+) create mode 100644 images/anim-tao.png create mode 100644 images/anim-tao.png.headers create mode 100644 largest-contentful-paint/animated/observe-animated-image.tentative.html create mode 100644 largest-contentful-paint/animated/observe-cross-origin-animated-image.tentative.html create mode 100644 largest-contentful-paint/animated/observe-cross-origin-tao-animated-image.tentative.html create mode 100644 largest-contentful-paint/animated/observe-non-animated-image.tentative.html diff --git a/images/anim-tao.png b/images/anim-tao.png new file mode 100644 index 0000000000000000000000000000000000000000..925e2efc9a97ade490f04d57271adc10b2fe69b6 GIT binary patch literal 460 zcmeAS@N?(olHy`uVBq!ia0vp^DL`z*!3HE(nbz$CQXGlNAwEEw35Xd!_f9SVQc`IU zF^~{g1Bd|zjLa_>8Ci1NIDx$Bo-U3d6?5L6GvoytbHL!w?6zvIV;iqHq?@gO(Ktbl zoS|)rq)@U)kD_7Q5eZr|_$v>-*5=KZ^ai?#!PC{xWt~$( F698Hck68c! literal 0 HcmV?d00001 diff --git a/images/anim-tao.png.headers b/images/anim-tao.png.headers new file mode 100644 index 000000000000000..0230e176e44567f --- /dev/null +++ b/images/anim-tao.png.headers @@ -0,0 +1,2 @@ +Timing-Allow-Origin: * + diff --git a/largest-contentful-paint/animated/observe-animated-image.tentative.html b/largest-contentful-paint/animated/observe-animated-image.tentative.html new file mode 100644 index 000000000000000..c10dda17db0428a --- /dev/null +++ b/largest-contentful-paint/animated/observe-animated-image.tentative.html @@ -0,0 +1,28 @@ + + + + + Largest Contentful Paint: observe image. + + + + + + + + diff --git a/largest-contentful-paint/animated/observe-cross-origin-animated-image.tentative.html b/largest-contentful-paint/animated/observe-cross-origin-animated-image.tentative.html new file mode 100644 index 000000000000000..993883c607b8f73 --- /dev/null +++ b/largest-contentful-paint/animated/observe-cross-origin-animated-image.tentative.html @@ -0,0 +1,30 @@ + + + + + Largest Contentful Paint: observe image. + + + + + + + + + diff --git a/largest-contentful-paint/animated/observe-cross-origin-tao-animated-image.tentative.html b/largest-contentful-paint/animated/observe-cross-origin-tao-animated-image.tentative.html new file mode 100644 index 000000000000000..137dde66383f772 --- /dev/null +++ b/largest-contentful-paint/animated/observe-cross-origin-tao-animated-image.tentative.html @@ -0,0 +1,30 @@ + + + + + Largest Contentful Paint: observe image. + + + + + + + + + diff --git a/largest-contentful-paint/animated/observe-non-animated-image.tentative.html b/largest-contentful-paint/animated/observe-non-animated-image.tentative.html new file mode 100644 index 000000000000000..6bbc0958b1deb25 --- /dev/null +++ b/largest-contentful-paint/animated/observe-non-animated-image.tentative.html @@ -0,0 +1,27 @@ + + + + + Largest Contentful Paint: observe image. + + + + + + + + diff --git a/largest-contentful-paint/resources/largest-contentful-paint-helpers.js b/largest-contentful-paint/resources/largest-contentful-paint-helpers.js index e12ece0a7561cba..d6a9e03db2e6d50 100644 --- a/largest-contentful-paint/resources/largest-contentful-paint-helpers.js +++ b/largest-contentful-paint/resources/largest-contentful-paint-helpers.js @@ -33,4 +33,28 @@ function checkImage(entry, expectedUrl, expectedID, expectedSize, timeLowerBound } else { assert_equals(entry.size, expectedSize); } + if (options.includes('animated')) { + assert_greater_than(entry.loadTime, entry.firstAnimatedFrameTime, 'firstAnimatedFrameTime should be smaller than loadTime'); + assert_less_than(entry.firstAnimatedFrameTime, 1000, 'firstAnimatedFrameTime should be smaller than the delay applied to the second frame'); + assert_greater_than(entry.firstAnimatedFrameTime, 0, 'firstAnimatedFrameTime should be larger than 0'); + } + if (options.includes('animated-zero')) { + assert_equals(entry.firstAnimatedFrameTime, 0, 'firstAnimatedFrameTime should be 0'); + } } + +const load_and_observe = url => { + return new Promise(resolve => { + (new PerformanceObserver(entryList => { + for (let entry of entryList.getEntries()) { + if (entry.url == url) { + resolve(entryList.getEntries()[0]); + } + } + })).observe({type: 'largest-contentful-paint', buffered: true}); + const img = new Image(); + img.id = 'image_id'; + img.src = url; + document.body.appendChild(img); + }); +};