diff --git a/intersection-observer/animating.html b/intersection-observer/animating.html
index af27d018662b93..4d402b296aa8a7 100644
--- a/intersection-observer/animating.html
+++ b/intersection-observer/animating.html
@@ -18,8 +18,8 @@
 }
 @keyframes slideup {
   0% { transform: translateY(0) }
-  30% { transform: translateY(0) }
-  31% { transform: translateY(-2000px) }
+  50% { transform: translateY(0) }
+  51% { transform: translateY(-2000px) }
   100% { transform: translateY(-2000px) }
 }
 </style>
@@ -40,10 +40,10 @@
         }
       });
     });
-    target.style.animation = "3s linear slideup";
+    target.style.animation = "4s linear slideup";
     setTimeout(() => {
-      reject("Did not get a not-intersecting notification within 2 seconds.");
-    }, 2000);
+      reject("Did not get a not-intersecting notification within 3 seconds.");
+    }, 3000);
     target.addEventListener("animationend", evt => {
       reject("animationend event fired before not-intersecting notification.");
     });
diff --git a/intersection-observer/root-is-table-with-overflow-scroll.html b/intersection-observer/root-is-table-with-overflow-scroll.html
new file mode 100644
index 00000000000000..cdebe22d8a5841
--- /dev/null
+++ b/intersection-observer/root-is-table-with-overflow-scroll.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing table with border and overflow scroll</title>
+<link rel="author" href="mailto:steven.novaryo@gmail.com" title="Steven Novaryo">
+<link rel="help" href="https://w3c.github.io/IntersectionObserver/#intersectionobserver-root-intersection-rectangle">
+<link rel="help" href="https://drafts.csswg.org/css-tables/#global-style-overrides">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+  #root {
+    box-sizing: border-box;
+    overflow: scroll;
+    border: 50px solid black;
+    will-change: transform;
+  }
+  #target {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    top: 300px;
+    left: 300px;
+    background-color: green;
+  }
+</style>
+<table id="root">
+  <tr>
+    <td>
+      <span id="target"></span>
+    </td>
+  </tr>
+</table>
+<script>
+var entries = [];
+var rootRect = root.getBoundingClientRect();
+
+runTestCycle(function() {
+  assert_true(!!target, "target exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, { root: root });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.");
+}, "IntersectionObserver observing an element inside a root table.");
+
+function step0() {
+  // To reduce the inconsistencies of the layout within different UAs we are calculating the offset dynamically.
+  var targetRect = target.getBoundingClientRect();
+  target.style.top = `${300 - (targetRect.top - rootRect.bottom + 50)}px`;
+  target.style.left = `${300 - (targetRect.left - rootRect.right + 50)}px`;
+  runTestCycle(step1, "Moving the target to the right bottom corner of the table.");
+  checkLastEntry(entries, 0, [
+    targetRect.left, targetRect.right, targetRect.top, targetRect.bottom,
+    0, 0, 0, 0,
+    rootRect.left, rootRect.right, rootRect.top, rootRect.bottom,
+    false
+  ]);
+}
+
+function step1() {
+  var targetRect = target.getBoundingClientRect();
+  checkLastEntry(entries, 1, [
+    targetRect.left, targetRect.right, targetRect.top, targetRect.bottom,
+    targetRect.left, targetRect.right, targetRect.top, targetRect.bottom,
+    rootRect.left, rootRect.right, rootRect.top, rootRect.bottom,
+    true
+  ]);
+}
+
+</script>
