images-repeated-resource.html (2699B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Element Timing: observe elements with the same resource</title> 4 <body> 5 <style> 6 body { 7 margin: 0; 8 } 9 </style> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="resources/element-timing-helpers.js"></script> 13 <script> 14 let beforeRender; 15 let numEntries = 0; 16 let loadTime1; 17 let loadTime2; 18 let renderTime1; 19 let renderTime2; 20 let img; 21 let img2; 22 async_test(function (t) { 23 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 24 const observer = new PerformanceObserver( 25 t.step_func(function(entryList) { 26 assert_equals(entryList.getEntries().length, 1); 27 const entry = entryList.getEntries()[0]; 28 const pathname = window.location.origin + '/element-timing/resources/square100.png'; 29 // Easier to check the |element| attribute here since element ID is the same for both images. 30 checkElement(entry, pathname, entry.identifier, 'image_id', beforeRender, null); 31 checkNaturalSize(entry, 100, 100); 32 if (entry.identifier === 'my_image') { 33 ++numEntries; 34 loadTime1 = entry.loadTime; 35 renderTime1 = entry.renderTime; 36 assert_equals(entry.element, img); 37 38 img2 = document.createElement('img'); 39 img2.src = 'resources/square100.png'; 40 img2.setAttribute('elementtiming', 'my_image2'); 41 img2.setAttribute('id', 'image_id'); 42 document.body.appendChild(img2); 43 beforeRender = performance.now(); 44 } 45 else if (entry.identifier === 'my_image2') { 46 ++numEntries; 47 loadTime2 = entry.loadTime; 48 renderTime2 = entry.renderTime; 49 assert_equals(entry.element, img2); 50 } 51 if (numEntries == 2) { 52 assert_greater_than(loadTime2, loadTime1, 'Second image loads after first.'); 53 assert_greater_than(renderTime2, renderTime1, 'Second image renders after first'); 54 t.done(); 55 } 56 }) 57 ); 58 observer.observe({entryTypes: ['element']}); 59 // We add the images during onload to be sure that the observer is registered 60 // in time for it to observe the element timing. 61 window.onload = () => { 62 // Add image of width and height equal to 100. 63 img = document.createElement('img'); 64 img.src = 'resources/square100.png'; 65 img.setAttribute('elementtiming', 'my_image'); 66 img.setAttribute('id', 'image_id'); 67 document.body.appendChild(img); 68 beforeRender = performance.now(); 69 }; 70 }, 'Elements with elementtiming and same src are observable.'); 71 </script> 72 73 </body>