buffered-flag.html (1813B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Element Timing: observe element with buffered flag</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 async_test(t => { 15 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 16 const beforeRender = performance.now(); 17 const img = document.createElement('img'); 18 // Initial observer used to know when entry has been dispatched 19 new PerformanceObserver(() => { 20 // Second observer should require buffered flag to receive the already-dispatched entry. 21 new PerformanceObserver(t.step_func_done(entryList => { 22 assert_equals(entryList.getEntries().length, 1); 23 const entry = entryList.getEntries()[0]; 24 const pathname = window.location.origin + '/images/black-rectangle.png'; 25 checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, document.getElementById('my_id')); 26 // Test that viewport size is at least 100, so element is fully visible. 27 assert_greater_than_equal(document.documentElement.clientWidth, 100, 'Width should be >= 100'); 28 assert_greater_than_equal(document.documentElement.clientHeight, 100, 'Height should be >= 100'); 29 30 checkRect(entry, [0, 100, 0, 50]); 31 checkNaturalSize(entry, 100, 50); 32 })).observe({type: 'element', buffered: true}); 33 }).observe({type: 'element'}); 34 img.src = '/images/black-rectangle.png'; 35 img.setAttribute('elementtiming', 'my_image'); 36 img.setAttribute('id', 'my_id'); 37 document.body.appendChild(img); 38 }, 'Element Timing entries are observable via buffered flag.'); 39 </script> 40 </body>