IntersectionObserver: use an idle callback to send notifications.

third_party/WebKit/LayoutTests/intersection-observer/timestamp.html

Index: third_party/WebKit/LayoutTests/intersection-observer/timestamp.html
diff --git a/third_party/WebKit/LayoutTests/intersection-observer/timestamp.html b/third_party/WebKit/LayoutTests/intersection-observer/timestamp.html
index 47f1dcc5cef50b539b05b8a32e2801154e17682c..dfc004a6d079b91ac0e7210329811c9735e5794a 100644
--- a/third_party/WebKit/LayoutTests/intersection-observer/timestamp.html
+++ b/third_party/WebKit/LayoutTests/intersection-observer/timestamp.html
@@ -8,43 +8,48 @@
 description("Test that intersection observer time is relative to time in the callback context.");
 var topWindowEntries = [];
 var iframeWindowEntries = [];
+var topWindowObserver;
+var iframeWindowObserver;
 var targetIframe;
 var iframeScroller;
 var topWindowTime;
 var iframeWindowTime;
-var timestampTolerance = 24;  // 1.5 times frame duration.
+// TODO(szager): We should be able to use a much smaller value for timestampTolerance
+// by using testRunner.runIdleTasks after this patch lands:
+//   https://codereview.chromium.org/1806133002/
+var timestampTolerance = 124;  // ~= 100ms idle callback timeout + 1.5 * frame time
 
 function step0() {
-  setTimeout(function() {
-    // Test results are only significant if there's a sufficient gap between
-    // top window time and iframe window time.
-    topWindowTime = performance.now();
-    iframeWindowTime = targetIframe.contentWindow.performance.now();
-    shouldBeGreaterThan("topWindowTime - iframeWindowTime", "2 * timestampTolerance");
+  // Test results are only significant if there's a sufficient gap between
+  // top window time and iframe window time.
+  topWindowTime = performance.now();
+  iframeWindowTime = targetIframe.contentWindow.performance.now();
+  shouldBeGreaterThan("topWindowTime - iframeWindowTime", "2.5 * timestampTolerance");
 
-    shouldBeEqualToNumber("topWindowEntries.length", 0);
-    shouldBeEqualToNumber("iframeWindowEntries.length", 0);
-    document.scrollingElement.scrollTop = 200;
-    iframeScroller.scrollTop = 250;
-    requestAnimationFrame(step1);
-  });
+  topWindowEntries = topWindowEntries.concat(topWindowObserver.takeRecords());
+  iframeWindowEntries = iframeWindowEntries.concat(iframeWindowObserver.takeRecords());
+  shouldBeEqualToNumber("topWindowEntries.length", 0);
+  shouldBeEqualToNumber("iframeWindowEntries.length", 0);
+  document.scrollingElement.scrollTop = 200;
+  iframeScroller.scrollTop = 250;
+  requestAnimationFrame(step1);
 }
 
 function step1() {
-  setTimeout(function() {
-    topWindowTime = performance.now();
-    iframeWindowTime = targetIframe.contentWindow.performance.now();
-    shouldBeEqualToNumber("topWindowEntries.length", 1);
-    if (topWindowEntries.length) {
-      shouldBeCloseTo("topWindowEntries[0].time", "topWindowTime", timestampTolerance);
-    }
-    shouldBeEqualToNumber("iframeWindowEntries.length", 1);
-    if (iframeWindowEntries.length) {
-      shouldBeCloseTo("iframeWindowEntries[0].time", "iframeWindowTime", timestampTolerance);
-    }
-    finishJSTest();
-    document.scrollingElement.scrollTop = 0;
-  });
+  topWindowEntries = topWindowEntries.concat(topWindowObserver.takeRecords());
+  iframeWindowEntries = iframeWindowEntries.concat(iframeWindowObserver.takeRecords());
+  topWindowTime = performance.now();
+  iframeWindowTime = targetIframe.contentWindow.performance.now();
+  shouldBeEqualToNumber("topWindowEntries.length", 1);
+  if (topWindowEntries.length)
+    shouldBeCloseTo("topWindowEntries[0].time", "topWindowTime", timestampTolerance);
+
+  shouldBeEqualToNumber("iframeWindowEntries.length", 1);
+  if (iframeWindowEntries.length) {
+    shouldBeCloseTo("iframeWindowEntries[0].time", "iframeWindowTime", timestampTolerance);
+  }
+  finishJSTest();
+  document.scrollingElement.scrollTop = 0;
 }
 
 function runTest() {
@@ -53,21 +58,22 @@ function runTest() {
 
   // Observer created here, callback created in iframe context.  Timestamps should be
   // from this window.
-  var observer = new IntersectionObserver(targetIframe.contentDocument.createObserverCallback(topWindowEntries), {});
-  observer.observe(target);
+  topWindowObserver = new IntersectionObserver(targetIframe.contentDocument.createObserverCallback(topWindowEntries), {});
+  topWindowObserver.observe(target);
 
   // Callback created here, observer created in iframe.  Timestamps should be
   // from iframe window.
-  observer = targetIframe.contentDocument.createObserver(function(newEntries) {
+  iframeWindowObserver = targetIframe.contentDocument.createObserver(function(newEntries) {
     for (var i = 0; i < newEntries.length; i++)
       iframeWindowEntries.push(newEntries[i]);
   });
-  observer.observe(target);
+  iframeWindowObserver.observe(target);
 
-  step0();
+  // See README for explanation of double RAF.
+  requestAnimationFrame(() => { requestAnimationFrame(step0) });
 }
 
-window.onload = function() {
+onload = function() {
   setTimeout(function() {
     targetIframe = document.createElement("iframe");
     targetIframe.src = "../resources/intersection-observer-timestamp-subframe.html";
@@ -75,7 +81,7 @@ window.onload = function() {
     var afterFrame = document.getElementById("afterFrame");
     afterFrame.parentNode.insertBefore(targetIframe, afterFrame);
     targetIframe.onload = runTest;
-  }, 100);
+  }, 2.5 * timestampTolerance);
 };
 
 </script>