observe-cross-origin-tao-animated-image.tentative.html (1766B)
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 <script src="/common/get-host-info.sub.js"></script> 10 </head> 11 <body> 12 <script> 13 promise_test(async () => { 14 assert_implements(window.LargestContentfulPaint, 15 "LargestContentfulPaint is not implemented"); 16 const beforeLoad = performance.now(); 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 {REMOTE_ORIGIN} = get_host_info(); 35 const url = REMOTE_ORIGIN + 36 '/images/anim-tao.png?pipe=trickle(304:d1)'; 37 const entry = await load_and_observe(url); 38 // anim-gr.png is 100 by 50. 39 const size = 100 * 50; 40 checkImage(entry, url, 'image_id', size, beforeLoad, ["animated"]); 41 }, "Same origin animated image is observable and has a first frame."); 42 </script> 43 </body> 44 </html>