loaf-ui-event-render-start.html (1710B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Long Animation Frame Timing: UI events and renderStart</title> 4 <meta name="timeout" content="long"> 5 <script src=/resources/testdriver.js></script> 6 <script src=/resources/testdriver-actions.js></script> 7 <script src=/resources/testdriver-vendor.js></script> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="resources/utils.js"></script> 11 12 <body> 13 <h1>Long Animation Frame: UI events and renderStart</h1> 14 <div id="log"></div> 15 <script> 16 17 promise_test(async t => { 18 const BUSY_DURATION_1 = 150; 19 const BUSY_DURATION_2 = 250; 20 const eventPromise = new Promise(resolve => document.body.addEventListener("pointermove", () => { 21 busy_wait(BUSY_DURATION_1); 22 requestAnimationFrame(() => busy_wait(BUSY_DURATION_2)); 23 resolve(); 24 }, {passive: true})); 25 const actions = new test_driver.Actions(); 26 await actions.pointerMove(10, 10, {origin: document.body}) 27 .pointerDown() 28 .pointerMove(3, 3) 29 .pointerUp() 30 .send(); 31 32 const scriptPredicate = s => s.invoker === "BODY.onpointermove"; 33 34 const loaf = await new Promise(resolve => 35 new PerformanceObserver(entries => { 36 const entry = entries.getEntries().find( 37 e => e.scripts.some(scriptPredicate)); 38 resolve(entry); 39 }).observe({type: "long-animation-frame", buffered: true})); 40 41 const script = loaf.scripts.find(scriptPredicate) 42 assert_greater_than_equal(loaf.renderStart, script.startTime + script.duration); 43 assert_greater_than_equal(loaf.blockingDuration, BUSY_DURATION_1 + BUSY_DURATION_2 - 50); 44 }, "UI events should always be before renderStart but still affect blockingDuration") 45 </script> 46 </body>