buffer-layout-shift.html (2041B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Layout Instability entries are not available via the performance timeline</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 new PerformanceObserver(t.step_func(list => { 21 const endTime = performance.now(); 22 assert_equals(list.getEntries().length, 1); 23 const entry = list.getEntries()[0]; 24 assert_equals(entry.entryType, "layout-shift"); 25 assert_equals(entry.name, ""); 26 assert_greater_than_equal(entry.startTime, startTime); 27 assert_less_than_equal(entry.startTime, endTime); 28 assert_equals(entry.duration, 0.0); 29 // The layout shift value should be: 30 // 300 * (100 + 60) * (60 / maxDimension) / viewport size. 31 assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60)); 32 33 // The entry should not be available via getEntries* methods. 34 assert_equals(performance.getEntriesByType('layout-shift').length, 0, 'getEntriesByType should have no layout-shift entries'); 35 assert_equals(performance.getEntriesByName('', 'layout-shift').length, 0, 'getEntriesByName should have no layout-shift entries'); 36 assert_equals(performance.getEntries().filter(e => e.entryType === 'layout-shift').length, 0, 'getEntries should have no layout-shift entries'); 37 resolve(); 38 })).observe({type: 'layout-shift'}); 39 // Modify the position of the div. 40 document.getElementById('myDiv').style = "top: 60px"; 41 }); 42 }, 'Layout shift before onload is not buffered into the performance timeline.'); 43 </script> 44 45 </body>