IntersectionObserver: Always send an initial notification.

Generate a notification for the initial state of a target, even if
it's offscreen.  This implements a change to the spec:

w3c/IntersectionObserver#165

[email protected],[email protected]
BUG=

Review-Url: https://codereview.chromium.org/2645283008
Cr-Commit-Position: refs/heads/master@{#447299}

third_party/WebKit/LayoutTests/intersection-observer/edge-inclusive-intersection.html

@@ -40,30 +40,30 @@
   observer.observe(target);
   entries = entries.concat(observer.takeRecords());
   assert_equals(entries.length, 0, "No initial notifications.");
-  runTestCycle(step0, "No notifications after first rAF.");
+  runTestCycle(step0, "First rAF.");
 }, "IntersectionObserver should detect and report edge-adjacent and zero-area intersections.");
 
 function step0() {
   runTestCycle(step1, "Set transform=translateY(200px) on target.");
-  assert_equals(entries.length, 0, "entries.length");
+  checkLastEntry(entries, 0, [8, 108, 258, 358, 0, 0, 0, 0, 8, 208, 8, 208, target]);
   target.style.transform = "translateY(200px)";
 }
 
 function step1() {
   runTestCycle(step2, "Set transform=translateY(201px) on target.");
-  checkLastEntry(entries, 0, [8, 108, 208, 308, 8, 108, 208, 208, 8, 208, 8, 208, target]);
+  checkLastEntry(entries, 1, [8, 108, 208, 308, 8, 108, 208, 208, 8, 208, 8, 208, target]);
   target.style.transform = "translateY(201px)";
 }
 
 function step2() {
   runTestCycle(step3, "Set transform=translateY(185px) on target.");
-  checkLastEntry(entries, 1);
+  checkLastEntry(entries, 2);
   target.style.height = "0px";
   target.style.width = "300px";
   target.style.transform = "translateY(185px)";
 }
 
 function step3() {
-  checkLastEntry(entries, 2, [8, 308, 193, 193, 8, 208, 193, 193, 8, 208, 8, 208, target]);
+  checkLastEntry(entries, 3, [8, 308, 193, 193, 8, 208, 193, 193, 8, 208, 8, 208, target]);
 }
 </script>

third_party/WebKit/LayoutTests/intersection-observer/iframe-no-root.html

@@ -41,30 +41,30 @@
     observer.observe(target);
     entries = entries.concat(observer.takeRecords());
     assert_equals(entries.length, 0, "No initial notifications.");
-    runTestCycle(step0, "No notifications after first rAF.");
+    runTestCycle(step0, "First rAF.");
   }, "Observer with the implicit root; target in a same-origin iframe.");
 };
 
 function step0() {
   document.scrollingElement.scrollTop = 200;
   runTestCycle(step1, "document.scrollingElement.scrollTop = 200");
-  assert_equals(entries.length, 0, "entries.length == 0");
+  checkLastEntry(entries, 0, [8, 108, 208, 308, 0, 0, 0, 0, 0, 785, 0, 600, target]);
 }
 
 function step1() {
   iframe.contentDocument.scrollingElement.scrollTop = 250;
   runTestCycle(step2, "iframe.contentDocument.scrollingElement.scrollTop = 250");
-  assert_equals(entries.length, 0, "entries.length == 0");
+  assert_equals(entries.length, 1, "entries.length == 1");
 }
 
 function step2() {
   document.scrollingElement.scrollTop = 100;
   runTestCycle(step3, "document.scrollingElement.scrollTop = 100");
-  checkLastEntry(entries, 0, [8, 108, -42, 58, 8, 108, 0, 58, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 1, [8, 108, -42, 58, 8, 108, 0, 58, 0, 785, 0, 600, target]);
 }
 
 function step3() {
-  checkLastEntry(entries, 1, [8, 108, -42, 58, 0, 0, 0, 0, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 2, [8, 108, -42, 58, 0, 0, 0, 0, 0, 785, 0, 600, target]);
   document.scrollingElement.scrollTop = 0;
 }
 </script>

third_party/WebKit/LayoutTests/intersection-observer/multiple-targets.html

@@ -47,34 +47,37 @@
   observer.observe(target3);
   entries = entries.concat(observer.takeRecords());
   assert_equals(entries.length, 0, "No initial notifications.");
-  runTestCycle(step0, "No notifications after first rAF.");
+  runTestCycle(step0, "First rAF.");
 }, "One observer with multiple targets.");
 
 function step0() {
   document.scrollingElement.scrollTop = 150;
   runTestCycle(step1, "document.scrollingElement.scrollTop = 150");
-  assert_equals(entries.length, 0, "No notifications.");
+  assert_equals(entries.length, 3, "Three initial notifications.");
+  assert_equals(entries[0].target, target1, "entries[0].target === target1");
+  assert_equals(entries[1].target, target2, "entries[1].target === target2");
+  assert_equals(entries[2].target, target3, "entries[2].target === target3");
 }
 
 function step1() {
   document.scrollingElement.scrollTop = 10000;
   runTestCycle(step2, "document.scrollingElement.scrollTop = 10000");
-  assert_equals(entries.length, 1, "One notification.");
-  assert_equals(entries[0].target, target1, "entries[0].target === target1");
+  assert_equals(entries.length, 4, "Four notifications.");
+  assert_equals(entries[3].target, target1, "entries[3].target === target1");
 }
 
 function step2() {
   document.scrollingElement.scrollTop = 0;
   runTestCycle(step3, "document.scrollingElement.scrollTop = 0");
-  assert_equals(entries.length, 3, "Three notifications.");
-  assert_equals(entries[1].target, target2, "entries[1].target === target2");
-  assert_equals(entries[2].target, target3, "entries[2].target === target3");
-}
-
-function step3() {
   assert_equals(entries.length, 6, "Six notifications.");
-  assert_equals(entries[3].target, target1, "entries[3].target === target1");
   assert_equals(entries[4].target, target2, "entries[4].target === target2");
   assert_equals(entries[5].target, target3, "entries[5].target === target3");
 }
+
+function step3() {
+  assert_equals(entries.length, 9, "Nine notifications.");
+  assert_equals(entries[6].target, target1, "entries[6].target === target1");
+  assert_equals(entries[7].target, target2, "entries[7].target === target2");
+  assert_equals(entries[8].target, target3, "entries[8].target === target3");
+}
 </script>

third_party/WebKit/LayoutTests/intersection-observer/multiple-thresholds.html

@@ -38,59 +38,59 @@
   observer.observe(target);
   entries = entries.concat(observer.takeRecords());
   assert_equals(entries.length, 0, "No initial notifications.");
-  runTestCycle(step0, "No notifications after first rAF.");
+  runTestCycle(step0, "First rAF.");
 }, "Observer with multiple thresholds.");
 
 function step0() {
   document.scrollingElement.scrollTop = 120;
   runTestCycle(step1, "document.scrollingElement.scrollTop = 120");
-  assert_equals(entries.length, 0, "No notifications after first rAF.");
+  checkLastEntry(entries, 0, [8, 108, 708, 808, 0, 0, 0, 0, 0, 785, 0, 600, target]);
 }
 
 function step1() {
   document.scrollingElement.scrollTop = 160;
   runTestCycle(step2, "document.scrollingElement.scrollTop = 160");
-  checkLastEntry(entries, 0, [8, 108, 588, 688, 8, 108, 588, 600, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 1, [8, 108, 588, 688, 8, 108, 588, 600, 0, 785, 0, 600, target]);
 }
 
 function step2() {
   document.scrollingElement.scrollTop = 200;
   runTestCycle(step3, "document.scrollingElement.scrollTop = 200");
-  checkLastEntry(entries, 1, [8, 108, 548, 648, 8, 108, 548, 600, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 2, [8, 108, 548, 648, 8, 108, 548, 600, 0, 785, 0, 600, target]);
 }
 
 function step3() {
   document.scrollingElement.scrollTop = 240;
   runTestCycle(step4, "document.scrollingElement.scrollTop = 240");
-  checkLastEntry(entries, 2, [8, 108, 508, 608, 8, 108, 508, 600, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 3, [8, 108, 508, 608, 8, 108, 508, 600, 0, 785, 0, 600, target]);
 }
 
 function step4() {
   document.scrollingElement.scrollTop = 740;
   runTestCycle(step5, "document.scrollingElement.scrollTop = 740");
-  checkLastEntry(entries, 3, [8, 108, 468, 568, 8, 108, 468, 568, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 4, [8, 108, 468, 568, 8, 108, 468, 568, 0, 785, 0, 600, target]);
 }
 
 function step5() {
   document.scrollingElement.scrollTop = 760;
   runTestCycle(step6, "document.scrollingElement.scrollTop = 760");
-  checkLastEntry(entries, 4, [8, 108, -32, 68, 8, 108, 0, 68, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 5, [8, 108, -32, 68, 8, 108, 0, 68, 0, 785, 0, 600, target]);
 }
 
 function step6() {
   document.scrollingElement.scrollTop = 800;
   runTestCycle(step7, "document.scrollingElement.scrollTop = 800");
-  checkLastEntry(entries, 5, [8, 108, -52, 48, 8, 108, 0, 48, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 6, [8, 108, -52, 48, 8, 108, 0, 48, 0, 785, 0, 600, target]);
 }
 
 function step7() {
-  checkLastEntry(entries, 6, [8, 108, -92, 8, 8, 108, 0, 8, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 7, [8, 108, -92, 8, 8, 108, 0, 8, 0, 785, 0, 600, target]);
   document.scrollingElement.scrollTop = 820;
   runTestCycle(step8, "document.scrollingElement.scrollTop = 820");
 }
 
 function step8() {
-  checkLastEntry(entries, 7, [8, 108, -112, -12, 0, 0, 0, 0, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 8, [8, 108, -112, -12, 0, 0, 0, 0, 0, 785, 0, 600, target]);
   document.scrollingElement.scrollTop = 0;
 }
 </script>

third_party/WebKit/LayoutTests/intersection-observer/observer-without-js-reference.html

@@ -43,11 +43,11 @@
 function step0() {
   document.scrollingElement.scrollTop = 300;
   runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
-  assert_equals(entries.length, 0, "No notifications after first rAF.");
+  assert_equals(entries.length, 1, "One notification.");
 }
 
 function step1() {
   document.scrollingElement.scrollTop = 0;
-  assert_equals(entries.length, 1, "One notification.");
+  assert_equals(entries.length, 2, "Two notifications.");
 }
 </script>

third_party/WebKit/LayoutTests/intersection-observer/remove-element.html

@@ -57,29 +57,29 @@
 function step0() {
   root.scrollTop = 150;
   runTestCycle(step1, "root.scrollTop = 150");
-  assert_equals(entries.length, 0, "No notifications after first rAF.");
+  checkLastEntry(entries, 0, [11, 111, 311, 411, 0, 0, 0, 0, 11, 111, 11, 211, target]);
 }
 
 function step1() {
   root.removeChild(target);
   runTestCycle(step2, "root.removeChild(target).");
-  checkLastEntry(entries, 0, [11, 111, 161, 261, 11, 111, 161, 211, 11, 111, 11, 211, target]);
+  checkLastEntry(entries, 1, [11, 111, 161, 261, 11, 111, 161, 211, 11, 111, 11, 211, target]);
 }
 
 function step2() {
   root.scrollTop = 0;
   root.insertBefore(target, trailingSpace);
   runTestCycle(step3, "root.insertBefore(target, trailingSpace).");
-  checkLastEntry(entries, 1, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, target]);
+  checkLastEntry(entries, 2, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, target]);
 }
 
 function step3() {
   root.scrollTop = 150;
   runTestCycle(step4, "root.scrollTop = 150 after reinserting target.");
-  checkLastEntry(entries, 1);
+  checkLastEntry(entries, 2);
 }
 
 function step4() {
-  checkLastEntry(entries, 2, [11, 111, 161, 261, 11, 111, 161, 211, 11, 111, 11, 211, target]);
+  checkLastEntry(entries, 3, [11, 111, 161, 261, 11, 111, 161, 211, 11, 111, 11, 211, target]);
 }
 </script>

third_party/WebKit/LayoutTests/intersection-observer/resources/cross-origin-subframe.html

@@ -52,9 +52,15 @@
 function step0() {
   entries = entries.concat(observer.takeRecords());
   nextStep = step1;
+  var expected = [{
+    boundingClientRect: coordinatesToClientRectJson(8, 208, 108, 308),
+    intersectionRect: coordinatesToClientRectJson(0, 0, 0, 0),
+    rootBounds: "null",
+    target: target.id
+  }];
   port.postMessage({
     actual: entries.map(entryToJson),
-    expected: [],
+    expected: expected,
     description: "First rAF"
   }, "*");
   entries = [];

third_party/WebKit/LayoutTests/intersection-observer/resources/observer-in-iframe-subframe.html

@@ -56,10 +56,10 @@
 function step1() {
   scroller.scrollTop = 250;
   runTestCycle(step2, "scroller.scrollTop = 250");
-  assert_equals(entries.length, 0, "No notifications after first rAF.");
+  checkLastEntry(entries, 0, [8, 108, 308, 408, 0, 0, 0, 0, 8, 208, 8, 208, target]);
 }
 
 function step2() {
-  checkLastEntry(entries, 0, [8, 108, 58, 158, 8, 108, 58, 158, 8, 208, 8, 208, target]);
+  checkLastEntry(entries, 1, [8, 108, 58, 158, 8, 108, 58, 158, 8, 208, 8, 208, target]);
 }
 </script>

third_party/WebKit/LayoutTests/intersection-observer/root-margin.html

@@ -54,24 +54,24 @@
 function step0() {
   document.scrollingElement.scrollLeft = 100;
   runTestCycle(step1, "document.scrollingElement.scrollLeft = 100");
-  assert_equals(entries.length, 0, "No notifications after first rAF.");
+  checkLastEntry(entries, 0, [1012, 1112, 708, 808, 0, 0, 0, 0, -30, 942, -10, 819, target]);
 }
 
 function step1() {
   document.scrollingElement.scrollTop = 800;
   runTestCycle(step2, "document.scrollingElement.scrollTop = 800");
-  checkLastEntry(entries, 0, [912, 1012, 708, 808, 912, 942, 708, 808, -30, 942, -10, 819, target]);
+  checkLastEntry(entries, 1, [912, 1012, 708, 808, 912, 942, 708, 808, -30, 942, -10, 819, target]);
 }
 
 function step2() {
   document.scrollingElement.scrollTop = 900;
   runTestCycle(step3, "document.scrollingElement.scrollTop = 900");
-  checkLastEntry(entries, 0);
+  checkLastEntry(entries, 1);
 }
 
 function step3() {
   document.scrollingElement.scrollLeft = 0;
   document.scrollingElement.scrollTop = 0;
-  checkLastEntry(entries, 1, [912, 1012, -192, -92, 0, 0, 0, 0, -30, 942, -10, 819, target]);
+  checkLastEntry(entries, 2, [912, 1012, -192, -92, 0, 0, 0, 0, -30, 942, -10, 819, target]);
 }
 </script>

third_party/WebKit/LayoutTests/intersection-observer/same-document-no-root.html

@@ -45,17 +45,17 @@
 function step0() {
   document.scrollingElement.scrollTop = 300;
   runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
-  assert_equals(entries.length, 0, "No notifications after first rAF.");
+  checkLastEntry(entries, 0, [8, 108, 708, 808, 0, 0, 0, 0, 0, 785, 0, 600, target]);
 }
 
 function step1() {
   document.scrollingElement.scrollTop = 100;
   runTestCycle(step2, "document.scrollingElement.scrollTop = 100");
-  checkLastEntry(entries, 0, [8, 108, 408, 508, 8, 108, 408, 508, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 1, [8, 108, 408, 508, 8, 108, 408, 508, 0, 785, 0, 600, target]);
 }
 
 function step2() {
   document.scrollingElement.scrollTop = 0;
-  checkLastEntry(entries, 1, [8, 108, 608, 708, 0, 0, 0, 0, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 2, [8, 108, 608, 708, 0, 0, 0, 0, 0, 785, 0, 600, target]);
 }
 </script>

third_party/WebKit/LayoutTests/intersection-observer/same-document-root.html

@@ -56,35 +56,35 @@
 function step0() {
   document.scrollingElement.scrollTop = 600;
   runTestCycle(step1, "document.scrollingElement.scrollTop = 600.");
-  assert_equals(entries.length, 0, "No notifications after first rAF.");
+  checkLastEntry(entries, 0, [11, 111, 1011, 1111, 0, 0, 0, 0, 11, 111, 711, 911, target]);
 }
 
 function step1() {
   root.scrollTop = 150;
   runTestCycle(step2, "root.scrollTop = 150 with root scrolled into view.");
-  assert_equals(entries.length, 0, "No notifications after scrolling frame.");
+  assert_equals(entries.length, 1, "No notifications after scrolling frame.");
 }
 
 function step2() {
   document.scrollingElement.scrollTop = 0;
   runTestCycle(step3, "document.scrollingElement.scrollTop = 0.");
-  checkLastEntry(entries, 0, [11, 111, 261, 361, 11, 111, 261, 311, 11, 111, 111, 311, target]);
+  checkLastEntry(entries, 1, [11, 111, 261, 361, 11, 111, 261, 311, 11, 111, 111, 311, target]);
 }
 
 function step3() {
   root.scrollTop = 0;
   runTestCycle(step4, "root.scrollTop = 0");
-  checkLastEntry(entries, 0);
+  checkLastEntry(entries, 1);
 }
 
 function step4() {
   root.scrollTop = 150;
   runTestCycle(step5, "root.scrollTop = 150 with root scrolled out of view.");
-  checkLastEntry(entries, 1, [11, 111, 1011, 1111, 0, 0, 0, 0, 11, 111, 711, 911, target]);
+  checkLastEntry(entries, 2, [11, 111, 1011, 1111, 0, 0, 0, 0, 11, 111, 711, 911, target]);
 }
 
 // This tests that notifications are generated even when the root element is off screen.
 function step5() {
-  checkLastEntry(entries, 2, [11, 111, 861, 961, 11, 111, 861, 911, 11, 111, 711, 911, target]);
+  checkLastEntry(entries, 3, [11, 111, 861, 961, 11, 111, 861, 911, 11, 111, 711, 911, target]);
 }
 </script>

third_party/WebKit/LayoutTests/intersection-observer/same-document-zero-size-target.html

@@ -45,17 +45,17 @@
 function step0() {
   document.scrollingElement.scrollTop = 300;
   runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
-  assert_equals(entries.length, 0, "No notifications after first rAF.");
+  checkLastEntry(entries, 0, [8, 8, 708, 708, 0, 0, 0, 0, 0, 785, 0, 600, target]);
 }
 
 function step1() {
   document.scrollingElement.scrollTop = 100;
   runTestCycle(step2, "document.scrollingElement.scrollTop = 100");
-  checkLastEntry(entries, 0, [8, 8, 408, 408, 8, 8, 408, 408, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 1, [8, 8, 408, 408, 8, 8, 408, 408, 0, 785, 0, 600, target]);
 }
 
 function step2() {
   document.scrollingElement.scrollTop = 0;
-  checkLastEntry(entries, 1, [8, 8, 608, 608, 0, 0, 0, 0, 0, 785, 0, 600, target]);
+  checkLastEntry(entries, 2, [8, 8, 608, 608, 0, 0, 0, 0, 0, 785, 0, 600, target]);
 }
 </script>