observe-animated-image.tentative.html (1689B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>Largest Contentful Paint: observe image.</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../resources/largest-contentful-paint-helpers.js"></script> 9 </head> 10 <body> 11 <script> 12 promise_test(async () => { 13 assert_implements(window.LargestContentfulPaint, 14 "LargestContentfulPaint is not implemented"); 15 const beforeLoad = performance.now(); 16 17 // Offsets inside `anim-gr.png`: 18 // IHDR: 8..33 19 // acTL: 33..53 20 // fcTL (1st frame): 53..91 21 // IDAT (1st frame): 91..254 22 // fcTL (2nd frame): 254..292 23 // fcTL payload starts at offset 262 24 // fdAT (2nd frame): 292..448 25 // fdAT payload starts at offset 304 26 // 27 // The HTTP request below will stall for 2 seconds after all pixels of 28 // the 1st frame are available, but before any 2nd frame pixels are 29 // available. The test will verify that LargestContentfulPaint fires 30 // "immediately", without waiting for the rest of the bytes. 31 // 32 // See https://crbug.com/393205780 why this offset (and not an earlier 33 // one) is used in the test. 34 const url = window.location.origin + 35 `/images/anim-gr.png?pipe=trickle(304:d${delay_pipe_value})`; 36 37 const entry = await load_and_observe(url); 38 const size = 100 * 50; // `anim-gr.png` is 100 by 50. 39 checkImage(entry, url, 'image_id', size, beforeLoad, ["animated"]); 40 }, "Same origin animated image is observable and has a first frame."); 41 </script> 42 </body> 43 </html>