Tests for requestIdleCallback deadline computation

Deadline should be: - capped at 50ms - capped at 1000/60 (~16ms) when there is a pending rAF callback - capped at the time of the next timeout - be updated when the above conditions change, during the callback itself See whatwg/html#7166
web-platform-tests · Oct 10, 2021 · 2186040 · 2186040
1 parent b1147c3
commit 2186040
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 0 deletions.
diff --git a/requestidlecallback/deadline-max-rAF-dynamic.html b/requestidlecallback/deadline-max-rAF-dynamic.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>window.requestIdleCallback max idle period deadline (requestAnimationFrame).</title>
+<meta name="timeout" content="long">
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/ric-utils.js"></script>
+<script>
+
+promise_test(async () => {
+  for (let i = 0; i < 10; ++i) {
+    const {before, after} = await new Promise(resolve => requestIdleCallback(async deadline => {
+      const before = deadline.timeRemaining();
+      const animationFramePromise = new Promise(requestAnimationFrame);
+      const after = deadline.timeRemaining();
+      await animationFramePromise;
+      resolve({before, after})
+    }))
+
+    assert_less_than_equal(after, before)
+    assert_less_than_equal(after, 1000 / 60)
+  }
+
+}, 'Check that the deadline is changed if there is a new requestAnimationFrame from within requestIdleCallback.');
+</script>
+<h1>Test of requestIdleCallback deadline behavior</h1>
+<div id="log"></div>
diff --git a/requestidlecallback/deadline-max-rAF.html b/requestidlecallback/deadline-max-rAF.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>window.requestIdleCallback max idle period deadline (requestAnimationFrame).</title>
+<meta name="timeout" content="long">
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/ric-utils.js"></script>
+<script>
+
+promise_test(async done => {
+  for (let i = 0; i < 10; ++i) {
+    requestAnimationFrame(() => {})
+    assert_less_than_equal(await getDeadlineForNextIdleCallback(), 1000 / 60)
+  }
+
+}, 'Check that the deadline is less than 16ms when there is a pending animation frame.');
+</script>
+<h1>Test of requestIdleCallback deadline behavior</h1>
+<div id="log"></div>
diff --git a/requestidlecallback/deadline-max-timeout-dynamic.html b/requestidlecallback/deadline-max-timeout-dynamic.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>window.requestIdleCallback max idle period deadline (dynamic timoeout).</title>
+<meta name="timeout" content="long">
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/ric-utils.js"></script>
+<script>
+
+promise_test(async () => {
+  for (let i = 0; i < 10; ++i) {
+    for (const timeout of [10, 20, 30]) {
+      const {before, after} = await new Promise(resolve => requestIdleCallback(async deadline => {
+        const before = deadline.timeRemaining();
+        const timerPromise = new Promise(resolve => setTimeout(resolve, timeout));
+        const after = deadline.timeRemaining();
+        await timerPromise;
+        resolve({before, after})
+      }))
+
+      assert_less_than_equal(after, before)
+      assert_less_than_equal(after, timeout)
+    }
+  }
+
+}, 'Check that the deadline is changed if there is a new timeout from within requestIdleCallback.');
+</script>
+<h1>Test of requestIdleCallback deadline behavior</h1>
+<div id="log"></div>
diff --git a/requestidlecallback/deadline-max-timeout.html b/requestidlecallback/deadline-max-timeout.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>window.requestIdleCallback max idle period deadline (timeout).</title>
+<meta name="timeout" content="long">
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/ric-utils.js"></script>
+<script>
+
+promise_test(async done => {
+  const timeouts = [15, 20, 30, 100]
+  for (let i = 0; i < 10; ++i)
+  for (const timeoutValue of timeouts) {
+    let resolved = false
+    const waitForTimeout = new Promise(resolve => setTimeout(() => {
+      resolved = true
+      resolve()
+    }, timeoutValue))
+    const deadline = await getDeadlineForNextIdleCallback()
+    if (!resolved) {
+      assert_less_than_equal(deadline, timeoutValue)
+      await waitForTimeout
+    }
+  }
+}, 'Check that the deadline is capped at the next timeout.');
+</script>
+<h1>Test of requestIdleCallback deadline behavior</h1>
+<div id="log"></div>
diff --git a/requestidlecallback/deadline-max.html b/requestidlecallback/deadline-max.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>window.requestIdleCallback max idle period deadline.</title>
+<meta name="timeout" content="long">
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/ric-utils.js"></script>
+<script>
+
+promise_test(async done => {
+  for (let i = 0; i < 10; ++i)
+    assert_less_than_equal(await getDeadlineForNextIdleCallback(), 50)
+
+}, 'Check that the deadline is less than 50ms.');
+</script>
+<h1>Test of requestIdleCallback deadline behavior</h1>
+<p>This test validates that deadlines returned for requestIdleCallback are less than 50ms.</p>
+<div id="log"></div>
diff --git a/requestidlecallback/resources/ric-utils.js b/requestidlecallback/resources/ric-utils.js
@@ -0,0 +1,7 @@
+function getDeadlineForNextIdleCallback() {
+    return new Promise(
+        resolve =>
+            requestIdleCallback(deadline => resolve(deadline.timeRemaining()))
+    );
+}
+