buffered-flag.html (1759B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Layout Instability: PerformanceObserver sees entries with buffered flag</title> 4 <body> 5 <style> 6 #myDiv { position: relative; width: 300px; height: 100px; background: blue; } 7 </style> 8 <div id='myDiv'></div> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="resources/util.js"></script> 12 <script> 13 promise_test(async t => { 14 assert_implements(window.LayoutShift, 'Layout Instability is not supported.'); 15 // Wait for the initial render to complete. 16 await waitForAnimationFrames(2); 17 18 const startTime = performance.now(); 19 return new Promise(resolve => { 20 // First observer creates second in callback to ensure the entry has been dispatched by the time 21 // the second observer begins observing. 22 new PerformanceObserver(() => { 23 const endTime = performance.now(); 24 // Second observer requires 'buffered: true' to see entries. 25 new PerformanceObserver(t.step_func(list => { 26 assert_equals(list.getEntries().length, 1); 27 const entry = list.getEntries()[0]; 28 assert_equals(entry.entryType, "layout-shift"); 29 assert_greater_than_equal(entry.startTime, startTime); 30 assert_less_than_equal(entry.startTime, endTime); 31 assert_equals(entry.duration, 0.0); 32 assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60)); 33 resolve(); 34 })).observe({'type': 'layout-shift', buffered: true}); 35 }).observe({type: 'layout-shift'}); 36 // Modify the position of the div to cause a layout-shift entry. 37 document.getElementById('myDiv').style = "top: 60px"; 38 }); 39 }, 'PerformanceObserver with buffered flag sees previous layout-shift entry.'); 40 </script> 41 </body>