progressively-loaded-image.html (1682B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset=utf-8 /> 4 <title>Element Timing: buffer elements before onload</title> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <script src="resources/element-timing-helpers.js"></script> 8 <body> 9 <script> 10 let beforeRender; 11 let img; 12 // Number of characters to be read on the initial read, before sleeping. 13 // Should be sufficient to do at least a first scan. 14 let numInitial = 75; 15 let sleep = 500; 16 async_test(function(t) { 17 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 18 const img_src = 'resources/progressive-image.py?name=square20.jpg&numInitial=' 19 + numInitial + '&sleep=' + sleep; 20 const observer = new PerformanceObserver( 21 t.step_func_done(function(entryList) { 22 assert_equals(entryList.getEntries().length, 1); 23 const entry = entryList.getEntries()[0]; 24 const pathname = window.location.origin + '/element-timing/' + img_src; 25 // Since the image is only fully loaded after the sleep, the render timestamp 26 // must be greater than |beforeRender| + |sleep|. 27 checkElement(entry, pathname, 'my_image', '', beforeRender + sleep, img); 28 checkNaturalSize(entry, 20, 20); 29 }) 30 ); 31 observer.observe({entryTypes: ['element']}); 32 33 img = document.createElement('img'); 34 img.src = img_src; 35 img.setAttribute('elementtiming', 'my_image'); 36 document.body.appendChild(img); 37 beforeRender = performance.now(); 38 t.step_timeout(() => {assert_true(0);}, 2000); 39 }, "Element Timing: image render timestamp occurs after it is fully loaded."); 40 </script>