loaf-basic.html (2112B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Long Animation Frame Timing: basic</title> 4 <meta name="timeout" content="long"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="resources/utils.js"></script> 8 9 <body> 10 <h1>Long Animation Frame: basic</h1> 11 <div id="log"></div> 12 <script> 13 14 promise_test(async t => { 15 await expect_long_frame((t, busy_wait) => busy_wait(), t); 16 }, 'A long busy wait is a long animation frame'); 17 18 promise_test(async t => { 19 await expect_long_frame((t, busy_wait) => requestAnimationFrame(busy_wait), t); 20 }, 'A long busy wait in a requestAnimationFrame is a long animation frame'); 21 22 promise_test(async t => { 23 const segment_duration = very_long_frame_duration / 2; 24 const entry = await expect_long_frame(async (t, busy_wait) => { 25 busy_wait(segment_duration); 26 await new Promise(resolve => requestAnimationFrame(() => { 27 busy_wait(segment_duration) 28 resolve(); 29 })); 30 }, t); 31 32 assert_not_equals(entry, "timeout"); 33 assert_greater_than_equal(entry.renderStart - entry.startTime, segment_duration); 34 }, 'A long busy wait split between a task and a requestAnimationFrame is a long animation frame'); 35 36 promise_test(async t => { 37 const segment_duration = very_long_frame_duration / 3; 38 const entry = await expect_long_frame(async (t, busy_wait) => { 39 const element = document.createElement("div"); 40 document.body.appendChild(element); 41 t.add_cleanup(() => element.remove()); 42 busy_wait(segment_duration); 43 requestAnimationFrame(() => { 44 busy_wait(segment_duration); 45 }); 46 47 new ResizeObserver(() => { 48 busy_wait(segment_duration); 49 }).observe(element); 50 }, t); 51 52 assert_not_equals(entry, "timeout"); 53 assert_greater_than_equal(entry.renderStart - entry.startTime, segment_duration); 54 assert_greater_than_equal(entry.styleAndLayoutStart - entry.renderStart, segment_duration); 55 }, 'ResizeObservers should create a long-frame and affect layoutStartTime'); 56 </script> 57 </body>