diff --git a/largest-contentful-paint/animated/observe-animated-image.tentative.html b/largest-contentful-paint/animated/observe-animated-image.tentative.html index cf7d262b0f842a..1ca4c7fe1953e1 100644 --- a/largest-contentful-paint/animated/observe-animated-image.tentative.html +++ b/largest-contentful-paint/animated/observe-animated-image.tentative.html @@ -13,15 +13,29 @@ 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. + + // Offsets inside `anim-gr.png`: + // IHDR: 8..33 + // acTL: 33..53 + // fcTL (1st frame): 53..91 + // IDAT (1st frame): 91..254 + // fcTL (2nd frame): 254..292 + // fcTL payload starts at offset 262 + // fdAT (2nd frame): 292..448 + // fdAT payload starts at offset 304 + // + // The HTTP request below will stall for 2 seconds after all pixels of + // the 1st frame are available, but before any 2nd frame pixels are + // available. The test will verify that LargestContentfulPaint fires + // "immediately", without waiting for the rest of the bytes. + // + // See https://crbug.com/393205780 why this offset (and not an earlier + // one) is used in the test. const url = window.location.origin + - `/images/anim-gr.png?pipe=trickle(262:d${delay_pipe_value})`; + `/images/anim-gr.png?pipe=trickle(304:d${delay_pipe_value})`; + const entry = await load_and_observe(url); - // anim-gr.png is 100 by 50. - const size = 100 * 50; + const size = 100 * 50; // `anim-gr.png` is 100 by 50. checkImage(entry, url, 'image_id', size, beforeLoad, ["animated"]); }, "Same origin animated image is observable and has a first frame.");