loaf-blocking-duration.html (2430B)
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: blocking duration</h1> 11 <div id="log"></div> 12 <script> 13 14 function loaf_blocking_duration_test(run, label) { 15 const OVERHEAD_EPSILON = 5; 16 const BLOCKING_THRESHOLD = 50; 17 promise_test(async t => { 18 let found = false; 19 for (let i = 0; i < 10 && !found; ++i) { 20 const longtask_promise = new Promise(resolve => new PerformanceObserver( 21 (entries, observer) => { 22 resolve(entries.getEntries()); 23 observer.disconnect(); 24 }).observe({entryTypes: ["longtask"]})); 25 const [longtask_entries, loaf_entry] = await Promise.all( 26 [longtask_promise, expect_long_frame(run, t)]); 27 const overlapping = longtask_entries.filter(longtask => 28 (longtask.startTime >= loaf_entry.startTime && 29 longtask.startTime < (loaf_entry.startTime + loaf_entry.duration) && 30 (!loaf_entry.renderStart || 31 (longtask.startTime < loaf_entry.renderStart - OVERHEAD_EPSILON)))); 32 33 const longest_index = overlapping.reduce( 34 (max, cur, i) => cur > overlapping[max] ? i : max, 0); 35 let expected_blocking_duration = 0; 36 overlapping.forEach(({duration}, i) => { 37 if (i === longest_index && loaf_entry.renderStart) 38 duration += loaf_entry.startTime + loaf_entry.duration - 39 loaf_entry.renderStart; 40 expected_blocking_duration += Math.max(0, duration - BLOCKING_THRESHOLD); 41 }); 42 43 if (!overlapping.length && loaf_entry.renderStart) { 44 expected_blocking_duration = 45 Math.max(0, 46 loaf_entry.startTime + loaf_entry.duration - loaf_entry.renderStart - 47 BLOCKING_THRESHOLD); 48 } 49 50 if (Math.abs(loaf_entry.blockingDuration - expected_blocking_duration) < 51 OVERHEAD_EPSILON) { 52 found = true; 53 } 54 } 55 assert_true(found); 56 }, `LoAF blockingDuration should be equivalent to long tasks: ${label}`); 57 } 58 59 loaf_blocking_duration_test((t, busy_wait) => t.step_timeout(busy_wait), "Non-rendering"); 60 loaf_blocking_duration_test((t, busy_wait) => t.step_timeout(() => { 61 busy_wait(); 62 requestAnimationFrame(generate_loaf_now); 63 }), "Rendering"); 64 </script> 65 </body>