recent-input.html (2497B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Layout Instability: observe after user input</title> 4 <body> 5 <style> 6 #myDiv { position: relative; width: 300px; height: 100px; background: blue; } 7 8 /* Disable the button's focus ring, which otherwise expands its visual rect by 9 * 1px on all sides, triggering a layout shift event. 10 */ 11 #button { outline: none; } 12 </style> 13 <div id='myDiv'></div> 14 <button id='button'>Generate a 'click' event</button> 15 <script src=/resources/testharness.js></script> 16 <script src=/resources/testharnessreport.js></script> 17 <script src=/resources/testdriver.js></script> 18 <script src=/resources/testdriver-vendor.js></script> 19 <script src=resources/util.js></script> 20 <script src=/event-timing/resources/event-timing-test-utils.js></script> 21 <script> 22 let timeAfterClick; 23 24 promise_test(async t => { 25 assert_implements(window.LayoutShift, 'Layout Instability is not supported.'); 26 // Wait for the initial render to complete. 27 await waitForAnimationFrames(2); 28 const startTime = performance.now(); 29 30 const observerPromise = new Promise(resolve => { 31 const observer = new PerformanceObserver( 32 entryList => { 33 resolve(entryList); 34 } 35 ).observe({ entryTypes: ['layout-shift'] }); 36 }); 37 38 // User input event 39 await clickAndBlockMain('button'); 40 41 // Modify the position of the div to trigger layout shift. 42 document.getElementById('myDiv').style = "top: 60px"; 43 44 const layoutShiftEntryList = await observerPromise; 45 const endTime = performance.now(); 46 47 assert_equals(layoutShiftEntryList.getEntries().length, 1); 48 const entry = layoutShiftEntryList.getEntries()[0]; 49 assert_equals(entry.entryType, "layout-shift"); 50 assert_equals(entry.name, ""); 51 assert_greater_than(entry.startTime, startTime, 52 "The layout shift entry startTime should be greater than the test startTime."); 53 assert_less_than(entry.startTime, endTime, 54 "The layout shift entry startTime should be less than the test endTime."); 55 assert_equals(entry.duration, 0.0); 56 // The layout shift value should be: 57 // 300 * (100 + 60) * (60 / maxDimension) / viewport size. 58 assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60)); 59 // We should see that there was a click input entry. 60 assert_equals(entry.hadRecentInput, true); 61 assert_less_than(entry.lastInputTime, entry.startTime, 62 "The lastInputTime should be less than the layout shift startTime."); 63 64 }, 'Layout shift right after user input is observable via PerformanceObserver.'); 65 </script> 66 67 </body>