Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
commit: 26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree: f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/intersection-observer
parent: Initial commit. (diff)
download: firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
117 files changed, 6458 insertions, 0 deletions
diff --git a/testing/web-platform/tests/intersection-observer/META.yml b/testing/web-platform/tests/intersection-observer/META.yml
new file mode 100644
index 0000000000..31dddab561
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/META.yml
@@ -0,0 +1,3 @@
+spec: https://w3c.github.io/IntersectionObserver/
+suggested_reviewers:
+  - szager-chromium
diff --git a/testing/web-platform/tests/intersection-observer/bounding-box.html b/testing/web-platform/tests/intersection-observer/bounding-box.html
new file mode 100644
index 0000000000..0206bfe419
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/bounding-box.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#root {
+  overflow: visible;
+  height: 200px;
+  width: 160px;
+  border: 8px solid black;
+}
+#target {
+  margin: 10px;
+  width: 100px;
+  height: 100px;
+  padding: 10px;
+  background-color: green;
+}
+</style>
+
+<div id="root">
+  <div id="target" style="transform: translateY(300px)"></div>
+</div>
+
+<script>
+var entries = [];
+var target;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "target exists");
+  var root = document.getElementById("root");
+  assert_true(!!root, "root 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.");
+}, "Test that the target's border bounding box is used to calculate intersection.");
+
+function step0() {
+  var targetBounds = clientBounds(target);
+  target.style.transform = "translateY(195px)";
+  runTestCycle(step1, "target.style.transform = 'translateY(195px)'");
+  checkLastEntry(entries, 0, targetBounds.concat(0, 0, 0, 0, 8, 184, 8, 224, false));
+}
+
+function step1() {
+  var targetBounds = clientBounds(target);
+  target.style.transform = "translateY(300px)";
+  runTestCycle(step2, "target.style.transform = 'translateY(300px)'");
+  checkLastEntry(entries, 1, targetBounds.concat(26, 146, 221, 224, 8, 184, 8, 224, true));
+}
+
+function step2() {
+  var targetBounds = clientBounds(target);
+  target.style.transform = "";
+  target.style.zoom = "2";
+  runTestCycle(step3, "target.style.zoom = 2");
+  checkLastEntry(entries, 2, targetBounds.concat(0, 0, 0, 0, 8, 184, 8, 224, false));
+}
+
+function step3() {
+  var targetBounds = clientBounds(target);
+  var intersectionWidth = (
+      176  // root width including border
+      -8   // root left border
+      -20  // target left margin * target zoom
+  )
+  var intersectionHeight = (216 - 8 - 20);
+  var intersectionRect = [targetBounds[0], targetBounds[0] + intersectionWidth,
+                          targetBounds[2], targetBounds[2] + intersectionHeight];
+  checkLastEntry(entries, 3, targetBounds.concat(intersectionRect).concat(8, 184, 8, 224, true));
+}
+
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/callback-cross-realm-report-exception.html b/testing/web-platform/tests/intersection-observer/callback-cross-realm-report-exception.html
new file mode 100644
index 0000000000..0bec720485
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/callback-cross-realm-report-exception.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>IntersectionObserver reports the exception from its callback in the callback's global object</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<iframe srcdoc='<div style="height: 100px;">foo</div>'></iframe>
+<iframe></iframe>
+<iframe></iframe>
+<script>
+setup({ allow_uncaught_exception: true });
+
+const onerrorCalls = [];
+window.onerror = () => { onerrorCalls.push("top"); };
+frames[0].onerror = () => { onerrorCalls.push("frame0"); };
+frames[1].onerror = () => { onerrorCalls.push("frame1"); };
+frames[2].onerror = () => { onerrorCalls.push("frame2"); };
+
+async_test(t => {
+  window.onload = t.step_func(() => {
+    const target = frames[0].document.querySelector("div");
+    const io = new frames[0].IntersectionObserver(new frames[1].Function(`throw new parent.frames[2].Error("PASS");`));
+    io.observe(target);
+
+    t.step_timeout(() => {
+      assert_array_equals(onerrorCalls, ["frame1"]);
+      t.done();
+    }, 25);
+  });
+});
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/client-rect.html b/testing/web-platform/tests/intersection-observer/client-rect.html
new file mode 100644
index 0000000000..e85171ca7c
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/client-rect.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+iframe {
+  width: 180px;
+  height: 100px;
+}
+</style>
+
+<iframe id="iframe" srcdoc="<div id='target' style='margin:0.5px;width:1000px;height:1000px;'></div>"></iframe>
+
+<script>
+var target;
+var entries = [];
+var observer;
+var iframe = document.getElementById("iframe");
+
+iframe.onload = function() {
+  runTestCycle(function() {
+    target = iframe.contentDocument.getElementById("target");
+    assert_true(!!target, "Target element exists.");
+    observer = new IntersectionObserver(function(changes) {
+      entries = entries.concat(changes);
+    });
+    observer.observe(target);
+    entries = entries.concat(observer.takeRecords());
+    assert_equals(entries.length, 0, "No initial notifications.");
+    runTestCycle(test0, "First rAF should generate notification.");
+  }, "IntersectionObserverEntry.boundingClientRect should match target.boundingClientRect()");
+};
+
+function test0() {
+  assert_equals(entries.length, 1, "One notification.");
+  var bcr = target.getBoundingClientRect();
+  checkLastEntry(entries, 0, [bcr.left, bcr.right, bcr.top, bcr.bottom]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/clip-path.html b/testing/web-platform/tests/intersection-observer/clip-path.html
new file mode 100644
index 0000000000..89f6d865b2
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/clip-path.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body { margin: 0 }
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#target {
+  background-color: green;
+  width: 100px;
+  height: 100px;
+}
+#container {
+  padding: 8px;
+  width: 0px;
+  height: 0px;
+}
+</style>
+
+<div id="container">
+  <div id="target"></div>
+</div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+
+promise_test(async function(t) {
+  var target = document.getElementById("target");
+  var container = document.getElementById("container");
+  var root = document.getElementById("root");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+
+  await waitForNotification();
+
+  checkLastEntry(
+    entries,
+    0,
+    [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true],
+  );
+  container.style.clipPath = "inset(1000px)";
+
+  await waitForNotification();
+
+  checkLastEntry(
+    entries,
+    1,
+    [8, 108, 8, 108, 0, 0, 0, 0, 0, vw, 0, vh, false],
+  );
+
+  container.style.clipPath = "";
+
+  await waitForNotification();
+
+  checkLastEntry(
+    entries,
+    2,
+    [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true],
+  );
+});
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/containing-block.html b/testing/web-platform/tests/intersection-observer/containing-block.html
new file mode 100644
index 0000000000..f7ce6fa724
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/containing-block.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#root {
+  width: 170px;
+  height: 200px;
+  overflow-y: scroll;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+  position: absolute;
+}
+</style>
+
+<div id="root" style="position: absolute">
+  <div id="target" style="left: 50px; top: 250px"></div>
+</div>
+
+<script>
+var entries = [];
+var root, target;
+
+runTestCycle(function() {
+  root = document.getElementById("root");
+  assert_true(!!root, "root element exists.");
+  target = document.getElementById("target");
+  assert_true(!!target, "target element 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.");
+  target.style.top = "10px";
+  runTestCycle(test1, "In containing block and intersecting.");
+}, "IntersectionObserver should only report intersections if root is a containing block ancestor of target.");
+
+function test1() {
+  runTestCycle(test2, "In containing block and not intersecting.");
+  var rootBounds = contentBounds(root);
+  checkLastEntry(entries, 0, [58, 158, 18, 118, 58, 158, 18, 118].concat(rootBounds));
+  target.style.top = "250px";
+}
+
+function test2() {
+  runTestCycle(test3, "Not in containing block and intersecting.");
+  var rootBounds = contentBounds(root);
+  checkLastEntry(entries, 1, [58, 158, 258, 358, 0, 0, 0, 0].concat(rootBounds));
+  root.style.position = "static";
+  target.style.top = "10px";
+}
+
+function test3() {
+  runTestCycle(test4, "Not in containing block and not intersecting.");
+  checkLastEntry(entries, 1);
+  target.style.top = "250px";
+}
+
+function test4() {
+  checkLastEntry(entries, 1);
+  target.style.top = "0";
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/cross-document-root.html b/testing/web-platform/tests/intersection-observer/cross-document-root.html
new file mode 100644
index 0000000000..9288bf5806
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/cross-document-root.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="author" href="mailto:szager@chromium.org" title="Stefan Zager">
+<link rel="help" href="https://w3c.github.io/IntersectionObserver/#update-intersection-observations-algo">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+iframe {
+  height: 250px;
+  width: 150px;
+  border: 0;
+}
+</style>
+<iframe id="target-iframe" src="resources/iframe-no-root-subframe.html"></iframe>
+
+<script>
+var iframe = document.getElementById("target-iframe");
+var target;
+var root;
+var entries = [];
+
+iframe.onload = function() {
+  runTestCycle(function() {
+    assert_true(!!iframe, "iframe exists");
+
+    target = iframe.contentDocument.getElementById("target");
+    assert_true(!!target, "Target element exists.");
+    var observer = new IntersectionObserver(function(changes) {
+      entries = entries.concat(changes)
+    }, { root: document });
+    observer.observe(target);
+    entries = entries.concat(observer.takeRecords());
+    assert_equals(entries.length, 0, "No initial notifications.");
+    runTestCycle(step0, "First rAF.");
+  }, "Observer with explicit root which is the document, observing a target in a same-origin iframe.");
+};
+
+function step0() {
+  checkLastEntry(entries, 0, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, false]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/cross-origin-iframe.sub.html b/testing/web-platform/tests/intersection-observer/cross-origin-iframe.sub.html
new file mode 100644
index 0000000000..d444237f6b
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/cross-origin-iframe.sub.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+iframe {
+  width: 160px;
+  height: 100px;
+  overflow-y: scroll;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+</style>
+
+<div class="spacer"></div>
+<iframe src="http://{{hosts[alt][]}}:{{ports[http][0]}}/intersection-observer/resources/cross-origin-subframe.html" sandbox="allow-scripts"></iframe>
+<div class="spacer"></div>
+
+<script>
+async_test(function(t) {
+  var iframe = document.querySelector("iframe");
+
+  function handleMessage(event) {
+    if (event.data.hasOwnProperty('scrollTo')) {
+      document.scrollingElement.scrollTop = event.data.scrollTo;
+      waitForNotification(t, function() { iframe.contentWindow.postMessage("", "*"); },
+        "document.scrollingElement.scrollTop = " + event.data.scrollTo);
+    } else if (event.data.hasOwnProperty('actual')) {
+      checkJsonEntries(event.data.actual, event.data.expected, event.data.description);
+    } else if (event.data.hasOwnProperty('DONE')) {
+      document.scrollingElement.scrollTop = 0;
+      t.done();
+    } else {
+      var description = event.data.description;
+      waitForNotification(t, function() { iframe.contentWindow.postMessage("", "*"); }, description);
+    }
+  }
+
+  window.addEventListener("message", t.step_func(handleMessage));
+
+  iframe.onload = t.step_func(function() {
+    waitForNotification(t, function() { iframe.contentWindow.postMessage("", "*") }, "setup");
+  });
+}, "Intersection observer test with no explicit root and target in a cross-origin iframe.");
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/disconnect.html b/testing/web-platform/tests/intersection-observer/disconnect.html
new file mode 100644
index 0000000000..9c02dafabe
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/disconnect.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="target"></div>
+<div class="spacer"></div>
+
+<script>
+var entries = [];
+var observer;
+var target;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "target exists");
+  observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.");
+}, "IntersectionObserver should not deliver pending notifications after disconnect().");
+
+function step0() {
+  runTestCycle(step1, "observer.disconnect()");
+  document.scrollingElement.scrollTop = 300;
+  observer.disconnect();
+  assert_equals(entries.length, 1, "Initial notification.");
+}
+
+function step1() {
+  assert_equals(entries.length, 1, "No new notifications.");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/display-none.html b/testing/web-platform/tests/intersection-observer/display-none.html
new file mode 100644
index 0000000000..6ac085315b
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/display-none.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#target {
+  background-color: green;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="target"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+
+promise_test(async function(t) {
+  var target = document.getElementById("target");
+  var root = document.getElementById("root");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+
+  await waitForNotification();
+
+  checkLastEntry(
+    entries,
+    0,
+    [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true],
+  );
+  target.style.display = "none";
+
+  await waitForNotification();
+
+  checkLastEntry(
+    entries,
+    1,
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, false],
+  );
+
+  target.style.display = "";
+
+  await waitForNotification();
+
+  checkLastEntry(
+    entries,
+    2,
+    [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true],
+  );
+});
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/document-scrolling-element-root.html b/testing/web-platform/tests/intersection-observer/document-scrolling-element-root.html
new file mode 100644
index 0000000000..443ff2ed85
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/document-scrolling-element-root.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+iframe {
+  height: 250px;
+  width: 150px;
+  border: 0;
+}
+</style>
+<iframe id="target-iframe" src="resources/iframe-no-root-subframe.html"></iframe>
+
+<script>
+var iframe = document.getElementById("target-iframe");
+var target;
+var root;
+var entries = [];
+
+iframe.onload = function() {
+  runTestCycle(function() {
+    assert_true(!!iframe, "iframe exists");
+
+    target = iframe.contentDocument.getElementById("target");
+    assert_true(!!target, "Target element exists.");
+    var observer = new IntersectionObserver(function(changes) {
+      entries = entries.concat(changes)
+    }, { root: iframe.contentDocument });
+    observer.observe(target);
+    entries = entries.concat(observer.takeRecords());
+    assert_equals(entries.length, 0, "No initial notifications.");
+    runTestCycle(step0, "First rAF.");
+  }, "Observer with explicit root which is the document.");
+};
+
+function step0() {
+  let vw = iframe.contentDocument.documentElement.clientWidth;
+  let vh = iframe.contentDocument.documentElement.clientHeight;
+  // The target element is partially clipped by the iframe's root scroller, so
+  // height of the intersection rect is (250 - 208) == 42.
+  checkLastEntry(entries, 0, [8, 108, 208, 308, 8, 108, 208, 250, 0, vw, 0, vh, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/edge-inclusive-intersection.html b/testing/web-platform/tests/intersection-observer/edge-inclusive-intersection.html
new file mode 100644
index 0000000000..b73c407a27
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/edge-inclusive-intersection.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#root {
+  width: 200px;
+  height: 200px;
+  overflow: visible;
+}
+#target {
+  background-color: green;
+}
+</style>
+
+<div id="root">
+  <div id="target" style="width: 100px; height: 100px; transform: translateY(250px)"></div>
+</div>
+
+<script>
+var entries = [];
+
+runTestCycle(function() {
+  var root = document.getElementById('root');
+  assert_true(!!root, "root element exists.");
+  var target = document.getElementById('target');
+  assert_true(!!target, "target element 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 should detect and report edge-adjacent and zero-area intersections.");
+
+function step0() {
+  runTestCycle(step1, "Set transform=translateY(200px) on target.");
+  checkLastEntry(entries, 0, [8, 108, 258, 358, 0, 0, 0, 0, 8, 208, 8, 208, false]);
+  target.style.transform = "translateY(200px)";
+}
+
+function step1() {
+  runTestCycle(step2, "Set transform=translateY(201px) on target.");
+  checkLastEntry(entries, 1, [8, 108, 208, 308, 8, 108, 208, 208, 8, 208, 8, 208, true]);
+  target.style.transform = "translateY(201px)";
+}
+
+function step2() {
+  runTestCycle(step3, "Set transform=translateY(185px) on target.");
+  checkLastEntry(entries, 2);
+  target.style.height = "0px";
+  target.style.width = "300px";
+  target.style.transform = "translateY(185px)";
+}
+
+function step3() {
+  checkLastEntry(entries, 3, [8, 308, 193, 193, 8, 208, 193, 193, 8, 208, 8, 208, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/empty-root-margin.html b/testing/web-platform/tests/intersection-observer/empty-root-margin.html
new file mode 100644
index 0000000000..9eaf856e95
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/empty-root-margin.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<div id="target"></div>
+
+<script>
+var target = document.getElementById("target");
+async_test((t) => {
+    var observer = new IntersectionObserver(t.step_func_done((entries) => {
+        var rootBounds = entries[0].rootBounds;
+        assert_equals(rootBounds.left, 0);
+        assert_equals(rootBounds.right, document.documentElement.clientWidth);
+        assert_equals(rootBounds.top, 0);
+        assert_equals(rootBounds.bottom, document.documentElement.clientHeight);
+        observer.disconnect();
+    }), { rootMargin: "" });
+    observer.observe(document.getElementById("target"));
+}, "An empty rootMargin string is interpreted as a margin of size zero");
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/explicit-root-different-document.tentative.html b/testing/web-platform/tests/intersection-observer/explicit-root-different-document.tentative.html
new file mode 100644
index 0000000000..15c5e620d5
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/explicit-root-different-document.tentative.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://github.com/w3c/IntersectionObserver/issues/457">
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    background: blue;
+    margin: 10px
+  }
+</style>
+<div id="root"></div>
+<script>
+let t = async_test("IntersectionObserver reports a (non-intersecting) entry if different-document from the doc");
+let doc = document.implementation.createHTMLDocument("");
+let target = doc.createElement("div");
+doc.body.appendChild(target);
+new IntersectionObserver(
+  t.step_func_done(function(records) {
+    assert_equals(records.length, 1);
+    assert_false(records[0].isIntersecting);
+  }),
+  { root: document.querySelector("#root") }
+).observe(target);
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/fixed-position-child-scroll.html b/testing/web-platform/tests/intersection-observer/fixed-position-child-scroll.html
new file mode 100644
index 0000000000..9360209046
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/fixed-position-child-scroll.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+<div style="position: fixed; top: 0; left: 0">
+  <div id="target" style="width: 100px; height: 100px"></div>
+</div>
+<div id="log" style="height: 2000px"></div>
+<script>
+var entries = [];
+
+runTestCycle(function() {
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, 'No initial notifications.');
+  runTestCycle(step0, 'First rAF.');
+}, 'Fixed-position intersection observer on scroll');
+
+function step0() {
+  window.scrollTo(0, 1000);
+  runTestCycle(step1, 'scrollTo(0, 1000)');
+  checkLastEntry(entries, 0,
+                 [0, 100, 0, 100, 0, 100, 0, 100, 0,
+                  document.documentElement.clientWidth, 0, document.documentElement.clientHeight,
+                  true]);
+}
+
+function step1() {
+  window.scrollTo(0, 0);
+  checkLastEntry(entries, 0,
+                 [0, 100, 0, 100, 0, 100, 0, 100, 0,
+                  document.documentElement.clientWidth, 0, document.documentElement.clientHeight,
+                  true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/fixed-position-iframe-scroll.html b/testing/web-platform/tests/intersection-observer/fixed-position-iframe-scroll.html
new file mode 100644
index 0000000000..7d90331fd0
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/fixed-position-iframe-scroll.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+<div style="position: fixed; top: 0; left: 0">
+  <iframe id="iframe" style="width: 300px; height: 300px; border: none"
+          srcdoc="<style>body {margin: 0}</style>
+                  <div id='target' style='width: 100px; height: 100px'></div>">
+  </iframe>
+</div>
+<div id="log" style="height: 2000px"></div>
+<script>
+var entries = [];
+
+iframe.onload = () => {
+  runTestCycle(function() {
+    var observer = new IntersectionObserver(function(changes) {
+      entries = entries.concat(changes)
+    });
+    observer.observe(iframe.contentDocument.getElementById('target'));
+    entries = entries.concat(observer.takeRecords());
+    assert_equals(entries.length, 0, 'No initial notifications.');
+    runTestCycle(step0, 'First rAF.');
+  }, 'Fixed-position intersection observer on scroll');
+};
+
+function step0() {
+  window.scrollTo(0, 1000);
+  runTestCycle(step1, 'scrollTo(0, 1000)');
+  checkLastEntry(entries, 0,
+                 [0, 100, 0, 100, 0, 100, 0, 100, 0,
+                  document.documentElement.clientWidth, 0, document.documentElement.clientHeight,
+                  true]);
+}
+
+function step1() {
+  window.scrollTo(0, 0);
+  checkLastEntry(entries, 0,
+                 [0, 100, 0, 100, 0, 100, 0, 100, 0,
+                  document.documentElement.clientWidth, 0, document.documentElement.clientHeight,
+                  true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/fixed-position-scroll.html b/testing/web-platform/tests/intersection-observer/fixed-position-scroll.html
new file mode 100644
index 0000000000..3dc02a8b0d
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/fixed-position-scroll.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+<div id="target" style="width: 100px; height: 100px; position: fixed; top: 0; left: 0"></div>
+<div id="log" style="height: 2000px"></div>
+<script>
+var entries = [];
+
+runTestCycle(function() {
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, 'No initial notifications.');
+  runTestCycle(step0, 'First rAF.');
+}, 'Fixed-position intersection observer on scroll');
+
+function step0() {
+  window.scrollTo(0, 1000);
+  runTestCycle(step1, 'scrollTo(0, 1000)');
+  checkLastEntry(entries, 0,
+                 [0, 100, 0, 100, 0, 100, 0, 100, 0,
+                  document.documentElement.clientWidth, 0, document.documentElement.clientHeight,
+                  true]);
+}
+
+function step1() {
+  window.scrollTo(0, 0);
+  checkLastEntry(entries, 0,
+                 [0, 100, 0, 100, 0, 100, 0, 100, 0,
+                  document.documentElement.clientWidth, 0, document.documentElement.clientHeight,
+                  true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/idlharness.window.js b/testing/web-platform/tests/intersection-observer/idlharness.window.js
new file mode 100644
index 0000000000..2059e1ce63
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/idlharness.window.js
@@ -0,0 +1,22 @@
+// META: script=/resources/WebIDLParser.js
+// META: script=/resources/idlharness.js
+
+'use strict';
+
+// https://w3c.github.io/IntersectionObserver/
+
+idl_test(
+  ['intersection-observer'],
+  ['dom'],
+  idl_array => {
+    idl_array.add_objects({
+      IntersectionObserver: ['observer'],
+    });
+    var options = {
+      root: document.body,
+      rootMargin: '0px',
+      threshold: 1.0
+    }
+    self.observer = new IntersectionObserver(() => {}, options);
+  }
+);
diff --git a/testing/web-platform/tests/intersection-observer/iframe-no-root-with-wrapping-scroller.html b/testing/web-platform/tests/intersection-observer/iframe-no-root-with-wrapping-scroller.html
new file mode 100644
index 0000000000..28e6d09d7b
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/iframe-no-root-with-wrapping-scroller.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+iframe {
+  height: 100px;
+  width: 150px;
+}
+</style>
+
+<div class="spacer"></div>
+<div style="overflow: hidden">
+  <iframe id="target-iframe" src="resources/iframe-no-root-subframe.html"></iframe>
+</div>
+<div class="spacer"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var iframe = document.getElementById("target-iframe");
+var target;
+var entries = [];
+
+iframe.onload = function() {
+  runTestCycle(function() {
+    assert_true(!!iframe, "iframe exists");
+
+    target = iframe.contentDocument.getElementById("target");
+    assert_true(!!target, "Target element exists.");
+    var observer = new IntersectionObserver(function(changes) {
+      entries = entries.concat(changes)
+    });
+    observer.observe(target);
+    entries = entries.concat(observer.takeRecords());
+    assert_equals(entries.length, 0, "No initial notifications.");
+    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");
+  checkLastEntry(entries, 0, [8, 108, 208, 308, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+}
+
+function step1() {
+  iframe.contentDocument.scrollingElement.scrollTop = 250;
+  runTestCycle(step2, "iframe.contentDocument.scrollingElement.scrollTop = 250");
+  assert_equals(entries.length, 1, "entries.length == 1");
+}
+
+function step2() {
+  document.scrollingElement.scrollTop = 100;
+  runTestCycle(step3, "document.scrollingElement.scrollTop = 100");
+  checkLastEntry(entries, 1, [8, 108, -42, 58, 8, 108, 0, 58, 0, vw, 0, vh, true]);
+}
+
+function step3() {
+  checkLastEntry(entries, 2, [8, 108, -42, 58, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+  document.scrollingElement.scrollTop = 0;
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/iframe-no-root.html b/testing/web-platform/tests/intersection-observer/iframe-no-root.html
new file mode 100644
index 0000000000..8532246fd1
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/iframe-no-root.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+iframe {
+  height: 100px;
+  width: 150px;
+}
+</style>
+
+<div class="spacer"></div>
+<iframe id="target-iframe" src="resources/iframe-no-root-subframe.html"></iframe>
+<div class="spacer"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var iframe = document.getElementById("target-iframe");
+var target;
+var entries = [];
+
+iframe.onload = function() {
+  runTestCycle(function() {
+    assert_true(!!iframe, "iframe exists");
+
+    target = iframe.contentDocument.getElementById("target");
+    assert_true(!!target, "Target element exists.");
+    var observer = new IntersectionObserver(function(changes) {
+      entries = entries.concat(changes)
+    });
+    observer.observe(target);
+    entries = entries.concat(observer.takeRecords());
+    assert_equals(entries.length, 0, "No initial notifications.");
+    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");
+  checkLastEntry(entries, 0, [8, 108, 208, 308, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+}
+
+function step1() {
+  iframe.contentDocument.scrollingElement.scrollTop = 250;
+  runTestCycle(step2, "iframe.contentDocument.scrollingElement.scrollTop = 250");
+  assert_equals(entries.length, 1, "entries.length == 1");
+}
+
+function step2() {
+  document.scrollingElement.scrollTop = 100;
+  runTestCycle(step3, "document.scrollingElement.scrollTop = 100");
+  checkLastEntry(entries, 1, [8, 108, -42, 58, 8, 108, 0, 58, 0, vw, 0, vh, true]);
+}
+
+function step3() {
+  checkLastEntry(entries, 2, [8, 108, -42, 58, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+  document.scrollingElement.scrollTop = 0;
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/initial-observation-with-threshold.html b/testing/web-platform/tests/intersection-observer/initial-observation-with-threshold.html
new file mode 100644
index 0000000000..b9218b09ea
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/initial-observation-with-threshold.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+#root {
+  display: inline-block;
+  overflow-y: scroll;
+  height: 240px;
+  border: 3px solid black;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  margin: 200px 0 0 0;
+  background-color: green;
+}
+</style>
+
+<div id="root">
+  <div id="target"></div>
+</div>
+
+<script>
+var entries = [];
+var root, target;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "target exists");
+  root = document.getElementById("root");
+  assert_true(!!root, "root exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, { root: root, threshold: [0.5] });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF");
+}, "First observation with a threshold.");
+
+function step0() {
+  root.scrollTop = 20;
+  runTestCycle(step1, "root.scrollTop = 20");
+  checkLastEntry(entries, 0, [ 11, 111, 211, 311, 11, 111, 211, 251, 11, 111, 11, 251, false]);
+}
+
+function step1() {
+  checkLastEntry(entries, 1, [ 11, 111, 191, 291, 11, 111, 191, 251, 11, 111, 11, 251, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/inline-client-rect.html b/testing/web-platform/tests/intersection-observer/inline-client-rect.html
new file mode 100644
index 0000000000..c096230eb1
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/inline-client-rect.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 120px;
+  left: 0;
+}
+#scroller {
+  width: 250px;
+  overflow: auto;
+}
+#overflow {
+  width: 1000px;
+}
+.content {
+  width: 100px;
+  height: 20px;
+  padding: 40px 0;
+  text-align: center;
+  background-color: grey;
+  display: inline-block;
+}
+</style>
+
+<div id="scroller">
+  <div id="overflow">
+    <span><div class="content">1</div></span>
+    <span><div class="content">2</div></span>
+    <span><div class="content">3</div></span>
+    <span id="target"><div class="content">4</div></span>
+    <span><div class="content">5</div></span>
+  </div>
+</div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+var scroller, target, spaceWidth, targetOffsetLeft, targetOffsetTop;
+
+runTestCycle(function() {
+  scroller = document.getElementById("scroller");
+  assert_true(!!scroller, "scroller exists");
+  target = document.getElementById("target");
+  assert_true(!!target, "target exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF");
+}, "Inline target");
+
+function step0() {
+  // Measure space width between two adjacent inlines.
+  let nextEl = target.nextElementSibling;
+  spaceWidth = nextEl.offsetLeft - target.offsetLeft - target.offsetWidth;
+  // 8px body margin + 3 preceding siblings @ (100px width + spaceWidth) each
+  targetOffsetLeft = 8 + 300 + (spaceWidth * 3);
+  // 8px body margin + 40px top padding
+  targetOffsetTop = 48;
+  let left = targetOffsetLeft;
+  let right = left + 100;
+  let top = targetOffsetTop;
+  let bottom = top + target.offsetHeight;
+
+  scroller.scrollLeft = 90;
+  runTestCycle(step1, "scroller.scrollLeft = 90");
+
+  checkLastEntry(entries, 0, [left, right, top, bottom,
+                              0, 0, 0, 0, 0, vw, 0, vh, false]);
+}
+
+function step1() {
+  // -90px for scroll offset
+  let left = targetOffsetLeft - 90;
+  let right = left + 100;
+  let top = targetOffsetTop;
+  let bottom = top + target.offsetHeight;
+  // 8px body margin + 250px client width of scroller
+  let scrollerRight = 258;
+  checkLastEntry(entries, 1, [left, right, top, bottom,
+                              left, scrollerRight, top, bottom,
+                              0, vw, 0, vh, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/inline-with-block-child-client-rect.html b/testing/web-platform/tests/intersection-observer/inline-with-block-child-client-rect.html
new file mode 100644
index 0000000000..81a8fd1256
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/inline-with-block-child-client-rect.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 120px;
+  left: 0;
+}
+#target {
+  display: inline;
+}
+</style>
+
+<div id="target">
+  <div>
+    <img width=100 height=100 />
+  </div>
+</div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+var entries = [];
+var target;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "target exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF");
+}, "Inline target containing a block child");
+
+function step0() {
+  assert_equals(entries.length, 1);
+  checkRect(entries[0].boundingClientRect, clientBounds(target),
+            "entry.boundingClientRect == target.getBoundingClientRect()");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/intersection-ratio-ib-split.html b/testing/web-platform/tests/intersection-observer/intersection-ratio-ib-split.html
new file mode 100644
index 0000000000..ba5370e335
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/intersection-ratio-ib-split.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverentry-intersectionratio">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1581876">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  block {
+    display: block;
+    width: 50vw;
+    height: 50vh;
+    background: green;
+  }
+</style>
+<inline>
+  <block></block>
+</inline>
+<script>
+
+// Account for rounding differences when viewport sizes can't cleanly divide.
+const epsilon = 1;
+
+promise_test(async function() {
+  for (let element of document.querySelectorAll("inline, block")) {
+    let entries = await new Promise(resolve => {
+      new IntersectionObserver(resolve).observe(element);
+    });
+    assert_equals(entries.length, 1, element.nodeName + ": Should get an entry");
+    assert_true(entries[0].isIntersecting, element.nodeName + ": Should be intersecting");
+    assert_equals(entries[0].intersectionRatio, 1, element.nodeName + ": Should be fully intersecting");
+
+    function assert_rects_equal(r1, r2, label) {
+      assert_approx_equals(r1.top, r2.top, epsilon, label + ": top should be equal");
+      assert_approx_equals(r1.right, r2.right, epsilon, label + ": right should be equal");
+      assert_approx_equals(r1.bottom, r2.bottom, epsilon, label + ": bottom should be equal");
+      assert_approx_equals(r1.left, r2.left, epsilon, label + ": left should be equal");
+    }
+
+    assert_rects_equal(entries[0].boundingClientRect, element.getBoundingClientRect(), element.nodeName + ": boundingClientRect should match");
+    assert_rects_equal(entries[0].intersectionRect, entries[0].boundingClientRect, element.nodeName + ": intersectionRect should match entry.boundingClientRect");
+  }
+}, "IntersectionObserver on an IB split gets the right intersection ratio");
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/intersection-ratio-with-fractional-bounds-2.html b/testing/web-platform/tests/intersection-observer/intersection-ratio-with-fractional-bounds-2.html
new file mode 100644
index 0000000000..1e250accd8
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/intersection-ratio-with-fractional-bounds-2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>IntersectionObserver ratio with fractional bounds</title>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1278897">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+  #container {
+    overflow: hidden;
+    width: 500px;
+  }
+  #target {
+    display: list-item;
+    padding: 16.1px;
+    background: rebeccapurple;
+  }
+</style>
+
+<div id="container">
+  <div id="list">
+    <span id="target"></span>
+  </div>
+</div>
+
+<script>
+async_test(function(t) {
+  let target = document.getElementById("target");
+  let list = document.getElementById("list");
+  let observer = new IntersectionObserver(t.step_func_done(function(entries) {
+    assert_equals(entries.length, 1);
+    assert_equals(entries[0].intersectionRatio, 1);
+    assert_equals(entries[0].isIntersecting, true);
+  }), { root: list, threshold: 1 });
+  observer.observe(target);
+});
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/intersection-ratio-with-fractional-bounds-in-iframe.html b/testing/web-platform/tests/intersection-observer/intersection-ratio-with-fractional-bounds-in-iframe.html
new file mode 100644
index 0000000000..b00f8ddaf6
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/intersection-ratio-with-fractional-bounds-in-iframe.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        .iframe-container {
+            width: 100%;
+            border: 0;
+            height: 200px;
+        }
+    </style>
+</head>
+<body>
+<script>
+    const asyncTest = async_test("intersectionRatio in iframe should be 1 for totally visible target with fractional bounds");
+    const onIframeObserved = (event) => {
+        const ratio = event.detail.intersectionRatio;
+        asyncTest.step(() => {
+            assert_equals(ratio, 1);
+        });
+        asyncTest.done();
+    };
+    window.document.addEventListener("iframeObserved", onIframeObserved, false);
+</script>
+<iframe class="iframe-container" src="./resources/intersection-ratio-with-fractional-bounds-in-iframe-content.html"></iframe>
+</body>
+</html>
diff --git a/testing/web-platform/tests/intersection-observer/intersection-ratio-with-fractional-bounds.html b/testing/web-platform/tests/intersection-observer/intersection-ratio-with-fractional-bounds.html
new file mode 100644
index 0000000000..9f54bef976
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/intersection-ratio-with-fractional-bounds.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>IntersectionObserver ratio with fractional bounds</title>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1020466">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+  body {
+    margin: 0;
+  }
+  #container {
+    display: flex;
+  }
+  #left {
+    height: 100px;
+    width: 0.88875%;
+    background: lightblue;
+  }
+  #target {
+    height: 100px;
+    width: 99.11125%;
+    background: rebeccapurple;
+  }
+</style>
+
+<div id="container">
+  <div id="left"></div>
+  <div id="target"></div>
+</div>
+
+<script>
+async_test(function(t) {
+  let target = document.getElementById("target");
+  let observer = new IntersectionObserver(t.step_func_done(function(entries) {
+    assert_equals(entries.length, 1);
+    assert_equals(entries[0].intersectionRatio, 1);
+    assert_equals(entries[0].isIntersecting, true);
+  }));
+  observer.observe(target);
+});
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/isIntersecting-change-events.html b/testing/web-platform/tests/intersection-observer/isIntersecting-change-events.html
new file mode 100644
index 0000000000..99bc65bd60
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/isIntersecting-change-events.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#root {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 150px;
+  height: 200px;
+  overflow-y: scroll;
+}
+#target1, #target2, #target3, #target4 {
+  width: 100px;
+  height: 100px;
+}
+#target1 {
+  background-color: green;
+}
+#target2 {
+  background-color: red;
+}
+#target3 {
+  background-color: blue;
+}
+#target4 {
+  background-color: yellow;
+}
+</style>
+
+<div id="root">
+  <div id="target1"></div>
+  <div id="target2"></div>
+  <div id="target3"></div>
+</div>
+
+<script>
+var entries = [];
+var observer;
+
+runTestCycle(function() {
+  var root = document.getElementById('root');
+  var target1 = document.getElementById('target1');
+  var target2 = document.getElementById('target2');
+  var target3 = document.getElementById('target3');
+  assert_true(!!root, "root element exists.");
+  assert_true(!!target1, "target1 element exists.");
+  assert_true(!!target2, "target2 element exists.");
+  assert_true(!!target3, "target3 element exists.");
+  observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes);
+  }, { root: root });
+  observer.observe(target1);
+  observer.observe(target2);
+  observer.observe(target3);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "Rects in initial notifications should report initial positions.");
+}, "isIntersecting changes should trigger notifications.");
+
+function step0() {
+  assert_equals(entries.length, 3, "Has 3 initial notifications.");
+  checkRect(entries[0].boundingClientRect, [0, 100, 0, 100], "Check 1st entry rect");
+  assert_equals(entries[0].target.id, 'target1', "Check 1st entry target id.");
+  checkIsIntersecting(entries, 0, true);
+  checkRect(entries[1].boundingClientRect, [0, 100, 100, 200], "Check 2nd entry rect");
+  assert_equals(entries[1].target.id, 'target2', "Check 2nd entry target id.");
+  checkIsIntersecting(entries, 1, true);
+  checkRect(entries[2].boundingClientRect, [0, 100, 200, 300], "Check 3rd entry rect");
+  assert_equals(entries[2].target.id, 'target3', "Check 3rd entry target id.");
+  checkIsIntersecting(entries, 2, true);
+  runTestCycle(step1, "Set scrollTop=100 and check for no new notifications.");
+  root.scrollTop = 100;
+}
+
+function step1() {
+  assert_equals(entries.length, 3, "Has 3 total notifications because isIntersecting did not change.");
+  runTestCycle(step2, "Add 4th target.");
+  root.scrollTop = 0;
+  var target4 = document.createElement('div');
+  target4.setAttribute('id', 'target4');
+  root.appendChild(target4);
+  observer.observe(target4);
+}
+
+function step2() {
+  assert_equals(entries.length, 4, "Has 4 total notifications because 4th element was added.");
+  checkRect(entries[3].boundingClientRect, [0, 100, 300, 400], "Check 4th entry rect");
+  assert_equals(entries[3].target.id, 'target4', "Check 4th entry target id.");
+  checkIsIntersecting(entries, 3, false);
+  assert_equals(entries[3].intersectionRatio, 0, 'target4 initially has intersectionRatio of 0.');
+  runTestCycle(step3, "Set scrollTop=100 and check for one new notification.");
+  root.scrollTop = 100;
+}
+
+function step3() {
+  assert_equals(entries.length, 5, "Has 5 total notifications.");
+  checkRect(entries[4].boundingClientRect, [0, 100, 200, 300], "Check 5th entry rect");
+  assert_equals(entries[4].target.id, 'target4', "Check 5th entry target id.");
+  checkIsIntersecting(entries, 4, true);
+  assert_equals(entries[4].intersectionRatio, 0, 'target4 still has intersectionRatio of 0.');
+  root.scrollTop = 0; // reset to make it easier to refresh and run the test
+}
+
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/isIntersecting-threshold.html b/testing/web-platform/tests/intersection-observer/isIntersecting-threshold.html
new file mode 100644
index 0000000000..842c8e2c9f
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/isIntersecting-threshold.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+<style>
+#scroller { width: 100px; height: 100px; overflow: scroll; }
+#scroller > div { height: 800px; }
+#target { margin-top: 25px; height: 50px; background-color: blue; }
+</style>
+<div id="scroller">
+  <div>
+    <div id="target"></div>
+  </div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(step2, "At initial scroll position");
+
+  scroller.scrollTop = 0;
+  let observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    { threshold: 1 }
+  );
+  observer.observe(target);
+};
+
+function step2() {
+  runTestCycle(step3, "Scrolled to half way through target element");
+
+  assert_equals(entries.length, 1);
+  assert_equals(entries[0].intersectionRatio, 1);
+  assert_equals(entries[0].isIntersecting, true);
+  scroller.scrollTop = 50;
+}
+
+function step3() {
+  runTestCycle(step4, "Scrolled to target element completely off screen");
+
+  assert_equals(entries.length, 2);
+  assert_true(entries[1].intersectionRatio >= 0.5 &&
+              entries[1].intersectionRatio < 1);
+  // See https://github.com/w3c/IntersectionObserver/issues/432
+  assert_equals(entries[1].isIntersecting, false);
+  scroller.scrollTop = 100;
+}
+
+function step4() {
+  assert_equals(entries.length, 2);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/multiple-targets.html b/testing/web-platform/tests/intersection-observer/multiple-targets.html
new file mode 100644
index 0000000000..22353e3aaa
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/multiple-targets.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+.target {
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+  background-color: green;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="target1" class="target"></div>
+<div id="target2" class="target"></div>
+<div id="target3" class="target"></div>
+
+<script>
+var entries = [];
+var target1, target2, target3;
+
+runTestCycle(function() {
+  target1 = document.getElementById("target1");
+  assert_true(!!target1, "target1 exists.");
+  target2 = document.getElementById("target2");
+  assert_true(!!target2, "target2 exists.");
+  target3 = document.getElementById("target3");
+  assert_true(!!target3, "target3 exists.");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target1);
+  observer.observe(target2);
+  observer.observe(target3);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  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, 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, 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, 6, "Six notifications.");
+  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>
diff --git a/testing/web-platform/tests/intersection-observer/multiple-thresholds.html b/testing/web-platform/tests/intersection-observer/multiple-thresholds.html
new file mode 100644
index 0000000000..3599e1f722
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/multiple-thresholds.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="target"></div>
+<div class="spacer"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+var target;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, { threshold: [0, 0.25, 0.5, 0.75, 1] });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.");
+}, "Observer with multiple thresholds.");
+
+function step0() {
+  document.scrollingElement.scrollTop = 120;
+  runTestCycle(step1, "document.scrollingElement.scrollTop = 120");
+  checkLastEntry(entries, 0, [8, 108, vh + 108, vh + 208, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+}
+
+function step1() {
+  document.scrollingElement.scrollTop = 160;
+  runTestCycle(step2, "document.scrollingElement.scrollTop = 160");
+  checkLastEntry(entries, 1, [8, 108, vh - 12, vh + 88, 8, 108, vh - 12, vh, 0, vw, 0, vh, true]);
+}
+
+function step2() {
+  document.scrollingElement.scrollTop = 200;
+  runTestCycle(step3, "document.scrollingElement.scrollTop = 200");
+  checkLastEntry(entries, 2, [8, 108, vh - 52, vh + 48, 8, 108, vh - 52, vh, 0, vw, 0, vh, true]);
+}
+
+function step3() {
+  document.scrollingElement.scrollTop = 240;
+  runTestCycle(step4, "document.scrollingElement.scrollTop = 240");
+  checkLastEntry(entries, 3, [8, 108, vh - 92, vh + 8, 8, 108, vh - 92, vh, 0, vw, 0, vh, true]);
+}
+
+function step4() {
+  document.scrollingElement.scrollTop = vh + 140;
+  runTestCycle(step5, "document.scrollingElement.scrollTop = window.innerHeight + 140");
+  checkLastEntry(entries, 4, [8, 108, vh - 132, vh - 32, 8, 108, vh - 132, vh - 32, 0, vw, 0, vh, true]);
+}
+
+function step5() {
+  document.scrollingElement.scrollTop = vh + 160;
+  runTestCycle(step6, "document.scrollingElement.scrollTop = window.innerHeight + 160");
+  checkLastEntry(entries, 5, [8, 108, -32, 68, 8, 108, 0, 68, 0, vw, 0, vh, true]);
+}
+
+function step6() {
+  document.scrollingElement.scrollTop = vh + 200;
+  runTestCycle(step7, "document.scrollingElement.scrollTop = window.innerHeight + 200");
+  checkLastEntry(entries, 6, [8, 108, -52, 48, 8, 108, 0, 48, 0, vw, 0, vh, true]);
+}
+
+function step7() {
+  checkLastEntry(entries, 7, [8, 108, -92, 8, 8, 108, 0, 8, 0, vw, 0, vh, true]);
+  document.scrollingElement.scrollTop = vh + 220;
+  runTestCycle(step8, "document.scrollingElement.scrollTop = window.innerHeight + 220");
+}
+
+function step8() {
+  checkLastEntry(entries, 8, [8, 108, -112, -12, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+  document.scrollingElement.scrollTop = 0;
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/nested-cross-origin-iframe.sub.html b/testing/web-platform/tests/intersection-observer/nested-cross-origin-iframe.sub.html
new file mode 100644
index 0000000000..090d236399
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/nested-cross-origin-iframe.sub.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/get-host-info.sub.js"></script>
+<script src="/css/cssom-view/support/scroll-behavior.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+<style>
+.spacer {
+  height: calc(100vh + 100px);
+}
+</style>
+<div class="spacer"></div>
+<iframe id="iframe"></iframe>
+<script>
+
+promise_test(async t => {
+  iframe.src =      // non secure port.
+    get_host_info().HTTP_NOTSAMESITE_ORIGIN + "/intersection-observer/resources/nested-cross-origin-child-iframe.sub.html";
+
+  await new Promise(resolve => {
+    window.addEventListener("message", event => {
+      if (event.data == "ready") {
+        resolve();
+      }
+    }, { once: true });
+  });
+
+  let isIntersecting = false;
+  window.addEventListener("message", function listener(event) {
+    if (event.origin == get_host_info().HTTPS_NOTSAMESITE_ORIGIN) {
+      isIntersecting = event.data;
+      window.removeEventListener("message", listener);
+    }
+  });
+
+  await new Promise(resolve => waitForNotification(t, resolve));
+  await new Promise(resolve => waitForNotification(t, resolve));
+
+  assert_false(isIntersecting,
+               "The target element is not intersecting in all ancestor viewports");
+
+  // Scroll the iframe in this document into view, but still the target element
+  // in the grand child document is out of the child iframe's viewport.
+  iframe.scrollIntoView({ behavior: "instant" });
+
+  await waitForScrollEnd(document.scrollingElement);
+
+  assert_false(isIntersecting,
+               "The target element is not intersecting in all ancestor viewports");
+
+  // Now make the target element visible in the child iframe's viewport.
+  frames[0].postMessage("scroll", "*");
+
+  await new Promise(resolve => {
+    window.addEventListener("message", function listener(event) {
+      // It's possible that the message from the IntersectionObserver in the
+      // grand child document (HTTPS_NORSAMESITE_ORIGIN) is delivered ealier
+      // than scrollEnd message from the child document
+      // (HTTP_NOTSAMESITE_ORIGIN), so we need to differentiate them.
+      if (event.origin == get_host_info().HTTP_NOTSAMESITE_ORIGIN &&
+          event.data == "scrollEnd" ) {
+        window.removeEventListener("message", listener);
+        resolve();
+      }
+    });
+  });
+
+  await new Promise(resolve => waitForNotification(t, resolve));
+
+  assert_true(isIntersecting,
+              "The target element is now intersecting in all ancestor viewports");
+}, "IntersectionObserver with `implicit root` in a nested cross-origin iframe works");
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/not-in-containing-block-chain.tentative.html b/testing/web-platform/tests/intersection-observer/not-in-containing-block-chain.tentative.html
new file mode 100644
index 0000000000..4490d0b631
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/not-in-containing-block-chain.tentative.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://github.com/w3c/IntersectionObserver/issues/457">
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    background: blue;
+    margin: 10px
+  }
+</style>
+<div id="target"></div>
+<div id="root"></div>
+<script>
+let t = async_test("IntersectionObserver reports a (non-intersecting) entry even if not in the containing block chain");
+new IntersectionObserver(
+  t.step_func_done(function(records) {
+    assert_equals(records.length, 1);
+    assert_false(records[0].isIntersecting);
+  }),
+  { root: document.querySelector("#root") }
+).observe(document.querySelector("#target"));
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/observer-attributes.html b/testing/web-platform/tests/intersection-observer/observer-attributes.html
new file mode 100644
index 0000000000..9d0b788b33
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/observer-attributes.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="root"></div>
+
+<script>
+test(function() {
+  var observer = new IntersectionObserver(function(e) {}, {});
+  test(function() { assert_equals(observer.root, null) },
+       "observer.root");
+  test(function() { assert_array_equals(observer.thresholds, [0]) },
+       "observer.thresholds");
+  test(function() { assert_equals(observer.rootMargin, "0px 0px 0px 0px") },
+       "observer.rootMargin");
+
+  observer = new IntersectionObserver(function(e) {}, {
+    rootMargin: " ",
+    threshold: []
+  });
+  test(function() { assert_array_equals(observer.thresholds, [0]) },
+       "empty observer.thresholds");
+  test(function() { assert_equals(observer.rootMargin, "0px 0px 0px 0px") },
+       "whitespace observer.rootMargin");
+
+  var rootDiv = document.getElementById("root");
+  observer = new IntersectionObserver(function(e) {}, {
+    root: rootDiv,
+    threshold: [0, 0.25, 0.5, 1.0],
+    rootMargin: "10% 20px"
+  });
+  test(function() { assert_equals(observer.root, rootDiv) },
+       "set observer.root");
+  test(function() { assert_array_equals(observer.thresholds, [0, 0.25, 0.5, 1.0]) },
+       "set observer.thresholds");
+  test(function() { assert_equals(observer.rootMargin, "10% 20px 10% 20px") },
+       "set observer.rootMargin");
+}, "Observer attribute getters.");
+
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/observer-callback-arguments.html b/testing/web-platform/tests/intersection-observer/observer-callback-arguments.html
new file mode 100644
index 0000000000..6e816969d0
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/observer-callback-arguments.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>IntersectionObserver: callback arguments</title>
+<link rel="help" href="https://w3c.github.io/IntersectionObserver/#notify-intersection-observers-algo">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+"use strict";
+
+async_test(t => {
+  const io = new IntersectionObserver(function(entries, observer) {
+    t.step(() => {
+      assert_equals(this, io);
+      assert_equals(arguments.length, 2);
+      assert_true(Array.isArray(entries));
+      assert_equals(entries.length, 1);
+      assert_true(entries[0] instanceof IntersectionObserverEntry);
+      assert_equals(observer, io);
+
+      io.disconnect();
+      t.done();
+    });
+  });
+
+  io.observe(document.body);
+}, "Callback is invoked with |this| value of IntersectionObserver and two arguments");
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/observer-exceptions.html b/testing/web-platform/tests/intersection-observer/observer-exceptions.html
new file mode 100644
index 0000000000..126790f290
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/observer-exceptions.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+test(function () {
+  assert_throws_js(RangeError, function() {
+    new IntersectionObserver(e => {}, {threshold: [1.1]})
+  })
+}, "IntersectionObserver constructor with { threshold: [1.1] }");
+
+test(function () {
+  assert_throws_js(TypeError, function() {
+    new IntersectionObserver(e => {}, {threshold: ["foo"]})
+  })
+}, 'IntersectionObserver constructor with { threshold: ["foo"] }');
+
+test(function () {
+  assert_throws_dom("SYNTAX_ERR", function() {
+    new IntersectionObserver(e => {}, {rootMargin: "1"})
+  })
+}, 'IntersectionObserver constructor with { rootMargin: "1" }');
+
+test(function () {
+  assert_throws_dom("SYNTAX_ERR", function() {
+    new IntersectionObserver(e => {}, {rootMargin: "2em"})
+  })
+}, 'IntersectionObserver constructor with { rootMargin: "2em" }');
+
+test(function () {
+  assert_throws_dom("SYNTAX_ERR", function() {
+    new IntersectionObserver(e => {}, {rootMargin: "auto"})
+  })
+}, 'IntersectionObserver constructor with { rootMargin: "auto" }');
+
+test(function () {
+  assert_throws_dom("SYNTAX_ERR", function() {
+    new IntersectionObserver(e => {}, {rootMargin: "calc(1px + 2px)"})
+  })
+}, 'IntersectionObserver constructor with { rootMargin: "calc(1px + 2px)" }');
+
+test(function () {
+  assert_throws_dom("SYNTAX_ERR", function() {
+    new IntersectionObserver(e => {}, {rootMargin: "1px !important"})
+  })
+}, 'IntersectionObserver constructor with { rootMargin: "1px !important" }');
+
+test(function () {
+  assert_throws_dom("SYNTAX_ERR", function() {
+    new IntersectionObserver(e => {}, {rootMargin: "1px 1px 1px 1px 1px"})
+  })
+}, 'IntersectionObserver constructor with { rootMargin: "1px 1px 1px 1px 1px" }');
+
+test(function () {
+  assert_throws_js(TypeError, function() {
+    let observer = new IntersectionObserver(c => {}, {});
+    observer.observe("foo");
+  })
+}, 'IntersectionObserver.observe("foo")');
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/observer-in-iframe.html b/testing/web-platform/tests/intersection-observer/observer-in-iframe.html
new file mode 100644
index 0000000000..e918bf1a4f
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/observer-in-iframe.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+</style>
+<iframe id="target-iframe" src="resources/observer-in-iframe-subframe.html" width="150px" height="150px"></iframe>
diff --git a/testing/web-platform/tests/intersection-observer/observer-without-js-reference.html b/testing/web-platform/tests/intersection-observer/observer-without-js-reference.html
new file mode 100644
index 0000000000..53100c50bb
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/observer-without-js-reference.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+<div class="spacer"></div>
+<div id="target"></div>
+<div class="spacer"></div>
+
+<script>
+var entries = [];
+
+runTestCycle(function() {
+  var target = document.getElementById("target");
+  assert_true(!!target, "Target exists");
+  function createObserver() {
+    new IntersectionObserver(function(changes) {
+      entries = entries.concat(changes)
+    }).observe(target);
+  }
+  createObserver();
+  runTestCycle(step0, "First rAF");
+}, "IntersectionObserver that is unreachable in js should still generate notifications.");
+
+function step0() {
+  document.scrollingElement.scrollTop = 300;
+  runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
+  assert_equals(entries.length, 1, "One notification.");
+}
+
+function step1() {
+  document.scrollingElement.scrollTop = 0;
+  assert_equals(entries.length, 2, "Two notifications.");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/padding-clip.html b/testing/web-platform/tests/intersection-observer/padding-clip.html
new file mode 100644
index 0000000000..0126304d64
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/padding-clip.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Scrollport is used rather than content rect to compute intersection ratio</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://github.com/w3c/IntersectionObserver/issues/504">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#root {
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  width: 100px;
+  height: 100px;
+  padding: 10px;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+  /* Shift into the padding area */
+  position: relative;
+  left: -10px;
+  top: -10px;
+}
+</style>
+<div id="root">
+  <div id="target"></div>
+</div>
+<script>
+promise_test(async function(t) {
+  const target = document.getElementById("target");
+  assert_true(!!target, "target exists");
+  const root = document.getElementById("root");
+  assert_true(!!root, "root exists");
+  const entries = await new Promise(resolve => {
+    const observer = new IntersectionObserver(resolve, { root });
+    observer.observe(target);
+  });
+  assert_equals(entries.length, 1, "Should have one entry.");
+  assert_equals(entries[0].intersectionRatio, 1, "Should be completely visible.");
+});
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/remove-element.html b/testing/web-platform/tests/intersection-observer/remove-element.html
new file mode 100644
index 0000000000..a093b22028
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/remove-element.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#root {
+  display: inline-block;
+  overflow-y: scroll;
+  height: 200px;
+  border: 3px solid black;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+.spacer {
+  height: 300px;
+}
+</style>
+
+<div id="root">
+  <div id="leading-space" class="spacer"></div>
+  <div id="target"></div>
+  <div id="trailing-space" class="spacer"</div>
+</div>
+
+<script>
+var entries = [];
+var root, target, trailingSpace;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "Target exists");
+  trailingSpace = document.getElementById("trailing-space");
+  assert_true(!!trailingSpace, "TrailingSpace exists");
+  root = document.getElementById("root");
+  assert_true(!!root, "Root 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");
+}, "Verify that not-intersecting notifications are sent when a target is removed from the DOM tree.");
+
+function step0() {
+  root.scrollTop = 150;
+  runTestCycle(step1, "root.scrollTop = 150");
+  checkLastEntry(entries, 0, [11, 111, 311, 411, 0, 0, 0, 0, 11, 111, 11, 211, false]);
+}
+
+function step1() {
+  root.removeChild(target);
+  runTestCycle(step2, "root.removeChild(target).");
+  checkLastEntry(entries, 1, [11, 111, 161, 261, 11, 111, 161, 211, 11, 111, 11, 211, true]);
+}
+
+function step2() {
+  root.scrollTop = 0;
+  root.insertBefore(target, trailingSpace);
+  runTestCycle(step3, "root.insertBefore(target, trailingSpace).");
+  checkLastEntry(entries, 2, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, false]);
+}
+
+function step3() {
+  root.scrollTop = 150;
+  runTestCycle(step4, "root.scrollTop = 150 after reinserting target.");
+  checkLastEntry(entries, 2);
+}
+
+function step4() {
+  checkLastEntry(entries, 3, [11, 111, 161, 261, 11, 111, 161, 211, 11, 111, 11, 211, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/resources/cross-origin-child-iframe.sub.html b/testing/web-platform/tests/intersection-observer/resources/cross-origin-child-iframe.sub.html
new file mode 100644
index 0000000000..c341cd4102
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/resources/cross-origin-child-iframe.sub.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<script src="/common/get-host-info.sub.js"></script>
+<iframe scrolling="no" frameborder="0" id="iframe"></iframe>
+<script>
+iframe.src =
+  get_host_info().ORIGIN + "/intersection-observer/resources/same-origin-grand-child-iframe.html";
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/resources/cross-origin-subframe.html b/testing/web-platform/tests/intersection-observer/resources/cross-origin-subframe.html
new file mode 100644
index 0000000000..1b34d7c7b7
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/resources/cross-origin-subframe.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<div style="height: 200px; width: 100px;"></div>
+<div id="target" style="background-color: green; width:100px; height:100px"></div>
+<div id="empty-target" style="width: 100px"></div>
+<div style="height: 200px; width: 100px;"></div>
+
+<script>
+var port;
+var entries = [];
+var target = document.getElementById("target");
+var emptyTarget = document.getElementById("empty-target");
+var scroller = document.scrollingElement;
+var nextStep;
+
+function clientRectToJson(rect) {
+  if (!rect)
+    return "null";
+  return {
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    left: rect.left
+  };
+}
+
+function entryToJson(entry) {
+  return {
+    boundingClientRect: clientRectToJson(entry.boundingClientRect),
+    intersectionRect: clientRectToJson(entry.intersectionRect),
+    rootBounds: clientRectToJson(entry.rootBounds),
+    isIntersecting: entry.isIntersecting,
+    target: entry.target === document.documentElement ? "html" : entry.target.id
+  };
+}
+
+function boundingClientRectToJson(element) {
+  let r = element.getBoundingClientRect();
+  return [r.left, r.right, r.top, r.bottom];
+}
+
+// Note that we never use RAF in this code, because this frame might get render-throttled.
+// Instead of RAF-ing, we just post an empty message to the parent window, which will
+// RAF when it is received, and then send us a message to cause the next step to run.
+
+// Use a rootMargin here, and verify it does NOT get applied for the cross-origin case.
+var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+}, { rootMargin: "7px" });
+observer.observe(target);
+observer.observe(emptyTarget);
+observer.observe(document.documentElement);
+
+function step0() {
+  entries = entries.concat(observer.takeRecords());
+  nextStep = step1;
+  var expected = [{
+    boundingClientRect: [8, 108, 208, 308],
+    intersectionRect: [0, 0, 0, 0],
+    rootBounds: "null",
+    isIntersecting: false,
+    target: target.id
+  }, {
+    boundingClientRect: [8, 108, 308, 308],
+    intersectionRect: [0, 0, 0, 0],
+    rootBounds: "null",
+    isIntersecting: false,
+    target: emptyTarget.id
+  }, {
+    boundingClientRect: boundingClientRectToJson(document.documentElement),
+    intersectionRect: [0, 0, 0, 0],
+    rootBounds: "null",
+    isIntersecting: false,
+    target: "html"
+  }];
+  port.postMessage({
+    actual: entries.map(entryToJson),
+    expected: expected,
+    description: "First rAF"
+  }, "*");
+  entries = [];
+  port.postMessage({scrollTo: 200}, "*");
+}
+
+function step1() {
+  entries = entries.concat(observer.takeRecords());
+  var client_rect = boundingClientRectToJson(document.documentElement);
+  // When the top document is scrolled all the way up, the iframe element is
+  // 108px below the scrolling viewport, and the iframe has a 2px border. When
+  // the top document is scrolled to y=200, the top 90px of the iframe's content
+  // is visible.
+  var expected = [{
+    boundingClientRect: client_rect,
+    intersectionRect: client_rect.slice(0, 3).concat(90),
+    rootBounds: "null",
+    isIntersecting: true,
+    target: "html"
+  }];
+  port.postMessage({
+    actual: entries.map(entryToJson),
+    expected: expected,
+    description: "topDocument.scrollingElement.scrollTop = 200"
+  }, "*");
+  entries = [];
+  scroller.scrollTop = 250;
+  nextStep = step2;
+  port.postMessage({}, "*");
+}
+
+function step2() {
+  entries = entries.concat(observer.takeRecords());
+  var expected = [{
+    boundingClientRect: [8, 108, -42, 58],
+    intersectionRect: [8, 108, 0, 58],
+    rootBounds: "null",
+    isIntersecting: true,
+    target: target.id
+  }, {
+    boundingClientRect: [8, 108, 58, 58],
+    intersectionRect: [8, 108, 58, 58],
+    rootBounds: "null",
+    isIntersecting: true,
+    target: emptyTarget.id
+  }];
+  port.postMessage({
+    actual: entries.map(entryToJson),
+    expected: expected,
+    description: "iframeDocument.scrollingElement.scrollTop = 250"
+  }, "*");
+  entries = [];
+  nextStep = step3;
+  port.postMessage({scrollTo: 100}, "*");
+}
+
+function step3() {
+  entries = entries.concat(observer.takeRecords());
+  var expected = [{
+    boundingClientRect: [8, 108, -42, 58],
+    intersectionRect: [0, 0, 0, 0],
+    rootBounds: "null",
+    isIntersecting: false,
+    target: target.id
+  }, {
+    boundingClientRect: [8, 108, 58, 58],
+    intersectionRect: [0, 0, 0, 0],
+    rootBounds: "null",
+    isIntersecting: false,
+    target: emptyTarget.id
+  }, {
+    boundingClientRect: boundingClientRectToJson(document.documentElement),
+    intersectionRect: [0, 0, 0, 0],
+    rootBounds: "null",
+    isIntersecting: false,
+    target: "html"
+  }];
+  port.postMessage({
+    actual: entries.map(entryToJson),
+    expected: expected,
+    description: "topDocument.scrollingElement.scrollTop = 100"
+  }, "*");
+  port.postMessage({DONE: 1}, "*");
+}
+
+function handleMessage(event)
+{
+  port = event.source;
+  nextStep();
+}
+
+nextStep = step0;
+window.addEventListener("message", handleMessage);
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/resources/iframe-no-root-subframe.html b/testing/web-platform/tests/intersection-observer/resources/iframe-no-root-subframe.html
new file mode 100644
index 0000000000..ee63a06ca0
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/resources/iframe-no-root-subframe.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<div style="height: 200px; width: 100px;"></div>
+<div id="target" style="background-color: green; width:100px; height:100px"></div>
+<div style="height: 200px; width: 100px;"></div>
diff --git a/testing/web-platform/tests/intersection-observer/resources/intersection-observer-test-utils.js b/testing/web-platform/tests/intersection-observer/resources/intersection-observer-test-utils.js
new file mode 100644
index 0000000000..a2edeeafca
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/resources/intersection-observer-test-utils.js
@@ -0,0 +1,217 @@
+// Here's how waitForNotification works:
+//
+// - myTestFunction0()
+//   - waitForNotification(myTestFunction1)
+//     - requestAnimationFrame()
+//   - Modify DOM in a way that should trigger an IntersectionObserver callback.
+// - BeginFrame
+//   - requestAnimationFrame handler runs
+//     - Second requestAnimationFrame()
+//   - Style, layout, paint
+//   - IntersectionObserver generates new notifications
+//     - Posts a task to deliver notifications
+// - Task to deliver IntersectionObserver notifications runs
+//   - IntersectionObserver callbacks run
+// - Second requestAnimationFrameHandler runs
+//     - step_timeout()
+// - step_timeout handler runs
+//   - myTestFunction1()
+//     - [optional] waitForNotification(myTestFunction2)
+//       - requestAnimationFrame()
+//     - Verify newly-arrived IntersectionObserver notifications
+//     - [optional] Modify DOM to trigger new notifications
+//
+// Ideally, it should be sufficient to use requestAnimationFrame followed
+// by two step_timeouts, with the first step_timeout firing in between the
+// requestAnimationFrame handler and the task to deliver notifications.
+// However, the precise timing of requestAnimationFrame, the generation of
+// a new display frame (when IntersectionObserver notifications are
+// generated), and the delivery of these events varies between engines, making
+// this tricky to test in a non-flaky way.
+//
+// In particular, in WebKit, requestAnimationFrame and the generation of
+// a display frame are two separate tasks, so a step_timeout called within
+// requestAnimationFrame can fire before a display frame is generated.
+//
+// In Gecko, on the other hand, requestAnimationFrame and the generation of
+// a display frame are a single task, and IntersectionObserver notifications
+// are generated during this task. However, the task posted to deliver these
+// notifications can fire after the following requestAnimationFrame.
+//
+// This means that in general, by the time the second requestAnimationFrame
+// handler runs, we know that IntersectionObservations have been generated,
+// and that a task to deliver these notifications has been posted (though
+// possibly not yet delivered). Then, by the time the step_timeout() handler
+// runs, these notifications have been delivered.
+//
+// Since waitForNotification uses a double-rAF, it is now possible that
+// IntersectionObservers may have generated more notifications than what is
+// under test, but have not yet scheduled the new batch of notifications for
+// delivery. As a result, observer.takeRecords should NOT be used in tests:
+//
+// - myTestFunction0()
+//   - waitForNotification(myTestFunction1)
+//     - requestAnimationFrame()
+//   - Modify DOM in a way that should trigger an IntersectionObserver callback.
+// - BeginFrame
+//   - requestAnimationFrame handler runs
+//     - Second requestAnimationFrame()
+//   - Style, layout, paint
+//   - IntersectionObserver generates a batch of notifications
+//     - Posts a task to deliver notifications
+// - Task to deliver IntersectionObserver notifications runs
+//   - IntersectionObserver callbacks run
+// - BeginFrame
+//   - Second requestAnimationFrameHandler runs
+//     - step_timeout()
+//   - IntersectionObserver generates another batch of notifications
+//     - Post task to deliver notifications
+// - step_timeout handler runs
+//   - myTestFunction1()
+//     - At this point, observer.takeRecords will get the second batch of
+//       notifications.
+function waitForNotification(t, f) {
+  return new Promise(resolve => {
+    requestAnimationFrame(function() {
+      requestAnimationFrame(function() {
+        let callback = function() {
+          resolve();
+          if (f) {
+            f();
+          }
+        };
+        if (t) {
+          t.step_timeout(callback);
+        } else {
+          setTimeout(callback);
+        }
+      });
+    });
+  });
+}
+
+// If you need to wait until the IntersectionObserver algorithm has a chance
+// to run, but don't need to wait for delivery of the notifications...
+function waitForFrame(t, f) {
+  return new Promise(resolve => {
+    requestAnimationFrame(function() {
+      t.step_timeout(function() {
+        resolve();
+        if (f) {
+          f();
+        }
+      });
+    });
+  });
+}
+
+// The timing of when runTestCycle is called is important.  It should be
+// called:
+//
+//   - Before or during the window load event, or
+//   - Inside of a prior runTestCycle callback, *before* any assert_* methods
+//     are called.
+//
+// Following these rules will ensure that the test suite will not abort before
+// all test steps have run.
+//
+// If the 'delay' parameter to the IntersectionObserver constructor is used,
+// tests will need to add the same delay to their runTestCycle invocations, to
+// wait for notifications to be generated and delivered.
+function runTestCycle(f, description, delay) {
+  async_test(function(t) {
+    if (delay) {
+      step_timeout(() => {
+        waitForNotification(t, t.step_func_done(f));
+      }, delay);
+    } else {
+      waitForNotification(t, t.step_func_done(f));
+    }
+  }, description);
+}
+
+// Root bounds for a root with an overflow clip as defined by:
+//   http://wicg.github.io/IntersectionObserver/#intersectionobserver-root-intersection-rectangle
+function contentBounds(root) {
+  var left = root.offsetLeft + root.clientLeft;
+  var right = left + root.clientWidth;
+  var top = root.offsetTop + root.clientTop;
+  var bottom = top + root.clientHeight;
+  return [left, right, top, bottom];
+}
+
+// Root bounds for a root without an overflow clip as defined by:
+//   http://wicg.github.io/IntersectionObserver/#intersectionobserver-root-intersection-rectangle
+function borderBoxBounds(root) {
+  var left = root.offsetLeft;
+  var right = left + root.offsetWidth;
+  var top = root.offsetTop;
+  var bottom = top + root.offsetHeight;
+  return [left, right, top, bottom];
+}
+
+function clientBounds(element) {
+  var rect = element.getBoundingClientRect();
+  return [rect.left, rect.right, rect.top, rect.bottom];
+}
+
+function rectArea(rect) {
+  return (rect.left - rect.right) * (rect.bottom - rect.top);
+}
+
+function checkRect(actual, expected, description, epsilon = 0) {
+  if (!expected.length)
+    return;
+  assert_approx_equals(actual.left, expected[0], epsilon, description + '.left');
+  assert_approx_equals(actual.right, expected[1], epsilon, description + '.right');
+  assert_approx_equals(actual.top, expected[2], epsilon, description + '.top');
+  assert_approx_equals(actual.bottom, expected[3], epsilon, description + '.bottom');
+}
+
+function checkLastEntry(entries, i, expected, epsilon = 0) {
+  assert_equals(entries.length, i + 1, 'entries.length');
+  if (expected) {
+    checkRect(
+        entries[i].boundingClientRect, expected.slice(0, 4),
+        'entries[' + i + '].boundingClientRect', epsilon);
+    checkRect(
+        entries[i].intersectionRect, expected.slice(4, 8),
+        'entries[' + i + '].intersectionRect', epsilon);
+    checkRect(
+        entries[i].rootBounds, expected.slice(8, 12),
+        'entries[' + i + '].rootBounds', epsilon);
+    if (expected.length > 12) {
+      assert_equals(
+          entries[i].isIntersecting, expected[12],
+          'entries[' + i + '].isIntersecting');
+    }
+  }
+}
+
+function checkJsonEntry(actual, expected) {
+  checkRect(
+      actual.boundingClientRect, expected.boundingClientRect,
+      'entry.boundingClientRect');
+  checkRect(
+      actual.intersectionRect, expected.intersectionRect,
+      'entry.intersectionRect');
+  if (actual.rootBounds == 'null')
+    assert_equals(expected.rootBounds, 'null', 'rootBounds is null');
+  else
+    checkRect(actual.rootBounds, expected.rootBounds, 'entry.rootBounds');
+  assert_equals(actual.isIntersecting, expected.isIntersecting);
+  assert_equals(actual.target, expected.target);
+}
+
+function checkJsonEntries(actual, expected, description) {
+  test(function() {
+    assert_equals(actual.length, expected.length);
+    for (var i = 0; i < actual.length; i++)
+      checkJsonEntry(actual[i], expected[i]);
+  }, description);
+}
+
+function checkIsIntersecting(entries, i, expected) {
+  assert_equals(entries[i].isIntersecting, expected,
+    'entries[' + i + '].target.isIntersecting equals ' + expected);
+}
diff --git a/testing/web-platform/tests/intersection-observer/resources/intersection-ratio-with-fractional-bounds-in-iframe-content.html b/testing/web-platform/tests/intersection-observer/resources/intersection-ratio-with-fractional-bounds-in-iframe-content.html
new file mode 100644
index 0000000000..696ebf6ebe
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/resources/intersection-ratio-with-fractional-bounds-in-iframe-content.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            margin: 0;
+            height: 100%;
+        }
+        .app {
+            display: flex;
+            width: 100%;
+        }
+        .sidebar {
+            width: 31.1%;
+            margin: 0;
+            background: rgb(231, 249, 139);
+        }
+        section {
+            width: 68.9%;
+            background-color: rgb(119, 219, 172);
+            border: dashed red 3px;
+        }
+        p {
+            margin-top: 0;
+        }
+    </style>
+</head>
+<body>
+    <div class=app>
+        <div class="sidebar"></div>
+        <section id=target>
+            <h2>Observer target</h2>
+            <p><strong>Intersection ratio:</strong> <span id=ratio></span></p>
+        </section>
+    </div>
+
+    <script>
+        const onIntersection = entries => {
+            const ratio = entries[0].intersectionRatio;
+            const eventData = { intersectionRatio: ratio };
+            document.getElementById("ratio").innerText = ratio.toFixed(5);
+            const event = new CustomEvent("iframeObserved", {detail: eventData});
+            parent.document.dispatchEvent(event);
+        };
+        const observer = new IntersectionObserver(onIntersection, {threshold: 1});
+        setTimeout(() => {observer.observe(document.getElementById("target"))}, 0);
+    </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/intersection-observer/resources/nested-cross-origin-child-iframe.sub.html b/testing/web-platform/tests/intersection-observer/resources/nested-cross-origin-child-iframe.sub.html
new file mode 100644
index 0000000000..78f3d2ca26
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/resources/nested-cross-origin-child-iframe.sub.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/common/get-host-info.sub.js"></script>
+<script src="/css/cssom-view/support/scroll-behavior.js"></script>
+<style>
+.spacer {
+  height: calc(100vh + 100px);
+}
+</style>
+<div class="spacer"></div>
+<iframe id="iframe"></iframe>
+<script>
+iframe.src =      // secure port
+  get_host_info().HTTPS_NOTSAMESITE_ORIGIN + "/intersection-observer/resources/nested-cross-origin-grand-child-iframe.html";
+
+window.addEventListener("message", async event => {
+  if (event.data == "scroll") {
+    iframe.scrollIntoView({ behavior: "instant" });
+    await waitForScrollEnd(document.scrollingElement);
+    window.parent.postMessage("scrollEnd", "*");
+  }
+});
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/resources/nested-cross-origin-grand-child-iframe.html b/testing/web-platform/tests/intersection-observer/resources/nested-cross-origin-grand-child-iframe.html
new file mode 100644
index 0000000000..3676760e35
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/resources/nested-cross-origin-grand-child-iframe.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<div id="target" style="height: 100px; background-color: green;"></div>
+<script>
+const observer = new IntersectionObserver(records => {
+  records.forEach(record => {
+    if (record.isIntersecting) {
+      window.top.postMessage(record.isIntersecting, "*");
+    }
+  });
+}, {});
+observer.observe(target);
+window.addEventListener("load", () => {
+  window.top.postMessage("ready", "*");
+});
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/resources/observer-in-iframe-subframe.html b/testing/web-platform/tests/intersection-observer/resources/observer-in-iframe-subframe.html
new file mode 100644
index 0000000000..9d0769ae44
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/resources/observer-in-iframe-subframe.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./intersection-observer-test-utils.js"></script>
+
+<style>
+#root {
+  width: 200px;
+  height: 200px;
+}
+#scroller {
+  width: 160px;
+  height: 200px;
+  overflow-y: scroll;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+.spacer {
+  height: 300px;
+}
+</style>
+
+<div id="root">
+  <div id="scroller">
+    <div class="spacer"></div>
+    <div id="target"></div>
+    <div class="spacer"></div>
+  </div>
+</div>
+
+<script>
+setup({message_events: [], output_document: window.parent.document});
+
+var entries = [];
+var root, scroller, target;
+
+runTestCycle(function() {
+  root = document.getElementById("root");
+  assert_true(!!root, "Root element exists.");
+  scroller = document.getElementById("scroller");
+  assert_true(!!scroller, "Scroller element exists.");
+  target = document.getElementById("target");
+  assert_true(!!target, "Target element 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(step1, "First rAF.");
+}, "IntersectionObserver in iframe with explicit root.");
+
+function step1() {
+  scroller.scrollTop = 250;
+  runTestCycle(step2, "scroller.scrollTop = 250");
+  checkLastEntry(entries, 0, [8, 108, 308, 408, 0, 0, 0, 0, 8, 208, 8, 208, false]);
+}
+
+function step2() {
+  checkLastEntry(entries, 1, [8, 108, 58, 158, 8, 108, 58, 158, 8, 208, 8, 208, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/resources/same-origin-grand-child-iframe.html b/testing/web-platform/tests/intersection-observer/resources/same-origin-grand-child-iframe.html
new file mode 100644
index 0000000000..0a1426ef02
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/resources/same-origin-grand-child-iframe.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<!--
+  target should be fully vertically in-viewport as 100px is way less than the
+  default iframe height.
+
+  right: 0 makes sure that we're occluded by 8px by the intermediate iframe.
+-->
+<div id="target" style="width: 100px; height: 100px; position: absolute; right: 0"></div>
+<script>
+const observer = new IntersectionObserver(records => {
+  if (records[0].isIntersecting) {
+    let { rootBounds, intersectionRect } = records[0];
+    window.top.postMessage({ rootBounds, intersectionRect }, "*");
+  }
+}, {});
+observer.observe(document.getElementById("target"));
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/resources/scaled-target-subframe.html b/testing/web-platform/tests/intersection-observer/resources/scaled-target-subframe.html
new file mode 100644
index 0000000000..8f6f930e00
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/resources/scaled-target-subframe.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<style>
+html, body {
+  margin: 0;
+}
+#target {
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="target">target</div>
+
+<script>
+var delay = 100;
+var results = [];
+
+function waitForNotification(f) {
+  setTimeout(() => {
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        setTimeout(f)
+      })
+    })
+  }, delay)
+}
+
+window.addEventListener("message", event => {
+  waitForNotification(() => {
+    window.parent.postMessage(results.map(e => e.isVisible), "*");
+    results = [];
+  });
+});
+
+onload = () => {
+  var target = document.getElementById("target");
+  var observer = new IntersectionObserver(entries => {
+    results = entries;
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(document.getElementById("target"));
+  window.parent.postMessage("", "*");
+};
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/resources/timestamp-subframe.html b/testing/web-platform/tests/intersection-observer/resources/timestamp-subframe.html
new file mode 100644
index 0000000000..143e4f6e23
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/resources/timestamp-subframe.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+.spacer {
+  width: height: 100px
+}
+</style>
+
+<div class="spacer"></div>
+<div id="target"></div>
+<div class="spacer"></div>
+
+<script>
+document.createObserverCallback = function(entries) {
+  return function(newEntries) {
+    for (var i in newEntries) {
+      entries.push(newEntries[i]);
+    }
+  };
+}
+document.createObserver = function(callback) {
+  return new IntersectionObserver(callback, {});
+};
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/resources/v2-subframe.html b/testing/web-platform/tests/intersection-observer/resources/v2-subframe.html
new file mode 100644
index 0000000000..295bbf047e
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/resources/v2-subframe.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<div id="target">target</div>
+<script>
+var delay = 100;
+var results = [];
+
+function waitForNotification(f) {
+  setTimeout(() => {
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        setTimeout(f)
+      })
+    })
+  }, delay)
+}
+
+window.addEventListener("message", event => {
+  waitForNotification(() => {
+    window.parent.postMessage(results.map(e => e.isVisible), "*");
+    results = [];
+  });
+});
+
+onload = () => {
+  var target = document.getElementById("target");
+  var observer = new IntersectionObserver(entries => {
+    results = entries;
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(document.getElementById("target"));
+  window.parent.postMessage("", "*");
+};
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/root-margin-root-element.html b/testing/web-platform/tests/intersection-observer/root-margin-root-element.html
new file mode 100644
index 0000000000..6016d45bdf
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/root-margin-root-element.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+#root {
+  display: inline-block;
+  overflow-y: scroll;
+  height: 200px;
+  border: 3px solid black;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="root">
+  <div style="height: 300px;"></div>
+  <div id="target"></div>
+</div>
+<div class="spacer"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+var root, target;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "target exists");
+  root = document.getElementById("root");
+  assert_true(!!root, "root exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, { root: root, rootMargin: "10px 20% 40% 30px" });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF");
+}, "Root margin with explicit root.");
+
+function step0() {
+  document.scrollingElement.scrollTop = vh;
+  runTestCycle(step1, "document.scrollingElement.scrollTop = window.innerHeight.");
+  checkLastEntry(entries, 0, [ 11, 111, vh + 411, vh + 511, 0, 0, 0, 0, -19, 131, vh + 101, vh + 391, false]);
+}
+
+function step1() {
+  root.scrollTop = 50;
+  runTestCycle(step2, "root.scrollTop = 50, putting target into root margin");
+  assert_equals(entries.length, 1, "No notifications after scrolling frame.");
+}
+
+function step2() {
+  document.scrollingElement.scrollTop = 0;
+  runTestCycle(step3, "document.scrollingElement.scrollTop = 0.");
+  checkLastEntry(entries, 1, [11, 111, 361, 461, 11, 111, 361, 391, -19, 131, 101, 391, true]);
+}
+
+function step3() {
+  root.scrollTop = 0;
+  runTestCycle(step4, "root.scrollTop = 0");
+  checkLastEntry(entries, 1);
+}
+
+function step4() {
+  root.scrollTop = 50;
+  runTestCycle(step5, "root.scrollTop = 50 with root scrolled out of view.");
+  checkLastEntry(entries, 2, [ 11, 111, vh + 411, vh + 511, 0, 0, 0, 0, -19, 131, vh + 101, vh + 391, false]);
+}
+
+// This tests that notifications are generated even when the root element is off screen.
+function step5() {
+  checkLastEntry(entries, 3, [11, 111, vh + 361, vh + 461, 11, 111, vh + 361, vh + 391, -19, 131, vh + 101, vh + 391, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/root-margin-rounding.html b/testing/web-platform/tests/intersection-observer/root-margin-rounding.html
new file mode 100644
index 0000000000..f5e3323019
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/root-margin-rounding.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-rootmargin">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1553673">
+<style>
+  html { width: 100vw; height: 100vh }
+</style>
+<script>
+const t = async_test("IntersectionObserver root margin cannot end up with negative rect (and thus non-intersecting) due to rounding");
+
+let remainingTests = 100;
+
+// This is just a best-effort test to catch issues.
+for (let i = 0; i < 100; ++i) {
+  let offset = i / 100;
+  let observer;
+  observer = new IntersectionObserver(t.step_func(function(entries) {
+    assert_equals(entries.length, 1);
+    assert_equals(entries[0].target, document.documentElement);
+    assert_true(entries[0].isIntersecting, "should be intersecting at " + offset);
+    if (!--remainingTests)
+      t.done();
+    observer.disconnect();
+  }), { rootMargin: `${-100 * (1 - offset)}% 0px ${-100 * offset}%` });
+  observer.observe(document.documentElement);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/root-margin.html b/testing/web-platform/tests/intersection-observer/root-margin.html
new file mode 100644
index 0000000000..898454c4f3
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/root-margin.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#target {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+.vertical-spacer {
+  height: calc(100vh + 100px);
+}
+.horizontal-spacer {
+  display: inline-block;
+  width: 120vw;
+}
+</style>
+
+<div class="vertical-spacer"></div>
+<div style="white-space:nowrap;">
+  <div class="horizontal-spacer"></div>
+  <div id="target"></div>
+  <div class="horizontal-spacer"></div>
+</div>
+<div class="vertical-spacer"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+var target;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "Target exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, { rootMargin: "10px 20% 40% 30px" });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.");
+}, "Root margin tests");
+
+function step0() {
+  var targetBounds = clientBounds(target);
+  document.scrollingElement.scrollLeft = 100;
+  runTestCycle(step1, "document.scrollingElement.scrollLeft = 100");
+  checkLastEntry(entries, 0, targetBounds.concat(0, 0, 0, 0, -30, vw * 1.2, -10, vh * 1.4, false));
+}
+
+function step1() {
+  var targetBounds = clientBounds(target);
+  var sw = window.innerWidth - document.documentElement.clientWidth;
+  var sh = window.innerHeight - document.documentElement.clientHeight;
+  document.scrollingElement.scrollTop = vh + 200;
+  runTestCycle(step2, "document.scrollingElement.scrollTop = document.documentElement.clientHeight + 200");
+  checkLastEntry(entries, 1, targetBounds.concat(
+    targetBounds[0], Math.min(targetBounds[1], vw * 1.2), vh + 108 + sh, Math.min(vh + 208 + sw, vh * 1.4),
+    -30, vw * 1.2, -10, vh * 1.4,
+    true
+  ));
+}
+
+function step2() {
+  document.scrollingElement.scrollTop = vh + 300;
+  runTestCycle(step3, "document.scrollingElement.scrollTop = document.documentElement.clientHeight + 300");
+  checkLastEntry(entries, 1);
+}
+
+function step3() {
+  var targetBounds = clientBounds(target);
+  document.scrollingElement.scrollLeft = 0;
+  document.scrollingElement.scrollTop = 0;
+  checkLastEntry(entries, 2, targetBounds.concat(0, 0, 0, 0, -30, vw * 1.2, -10, vh * 1.4, false));
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/root-vertical-rl.html b/testing/web-platform/tests/intersection-observer/root-vertical-rl.html
new file mode 100644
index 0000000000..ce4203d131
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/root-vertical-rl.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body {
+  margin: 0;
+}
+#root {
+  width: 200px;
+  height: 200px;
+  overflow: hidden;
+  border-left: 50px solid yellow;
+  writing-mode: vertical-rl;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<div id="root">
+  <div id="target" style="width: 100px; height: 100px; transform: translateX(101px)"></div>
+</div>
+
+<script>
+var entries = [];
+
+runTestCycle(function() {
+  var root = document.getElementById('root');
+  var target = document.getElementById('target');
+  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 vertical-rl root.");
+
+function step0() {
+  runTestCycle(step1, "Set transform=translateX(50px) on target.");
+  checkLastEntry(entries, 0, [251, 351, 0, 100, 0, 0, 0, 0, 50, 250, 0, 200, false]);
+  target.style.transform = "translateX(50px)";
+}
+
+function step1() {
+  checkLastEntry(entries, 1, [200, 300, 0, 100, 200, 250, 0, 100, 50, 250, 0, 200, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/rtl-clipped-root.html b/testing/web-platform/tests/intersection-observer/rtl-clipped-root.html
new file mode 100644
index 0000000000..a30c6e38c5
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/rtl-clipped-root.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html dir="rtl">
+<head>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="./resources/intersection-observer-test-utils.js"></script>
+
+  <style>
+  pre, #log {
+    position: absolute;
+    top: 120px;
+    left: 0;
+  }
+  #root {
+    width: 350px;
+    height: 100px;
+    border: 1px solid black;
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+  }
+  #target-start, #target-end {
+    width: 100px;
+    height: 100px;
+    flex-shrink: 0;
+    background-color: green;
+    text-align: center;
+  }
+  #target-end {
+    margin-inline-start: 500px;
+  }
+  </style>
+</head>
+
+<div id="root">
+  <div id="target-start">start</div>
+  <div id="target-end">end</div>
+</div>
+
+<script>
+runTestCycle(function() {
+  let io = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add("intersecting");
+      } else {
+        entry.target.classList.remove("intersecting");
+      }
+    });
+  }, { root: document.getElementById("root") });
+  document.querySelectorAll("#root > div").forEach(element => {
+    io.observe(element);
+  });
+  runTestCycle(step0, "First rAF");
+}, "Explicit rtl root with overflow clipping");
+
+function step0() {
+  assert_true(
+    document.getElementById("target-start").classList.contains("intersecting"),
+    "Target at scroll start is intersecting");
+  assert_false(
+    document.getElementById("target-end").classList.contains("intersecting"),
+    "Target at scroll end is not intersecting");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/same-document-no-root.html b/testing/web-platform/tests/intersection-observer/same-document-no-root.html
new file mode 100644
index 0000000000..63e9f86d9c
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/same-document-no-root.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="target"></div>
+<div class="spacer"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+var target;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "target exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.");
+}, "IntersectionObserver in a single document using the implicit root.");
+
+function step0() {
+  document.scrollingElement.scrollTop = 300;
+  runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
+  checkLastEntry(entries, 0, [8, 108, vh + 108, vh + 208, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+}
+
+function step1() {
+  document.scrollingElement.scrollTop = 100;
+  runTestCycle(step2, "document.scrollingElement.scrollTop = 100");
+  checkLastEntry(entries, 1, [8, 108, vh - 192, vh - 92, 8, 108, vh - 192, vh - 92, 0, vw, 0, vh, true]);
+}
+
+function step2() {
+  document.scrollingElement.scrollTop = 0;
+  checkLastEntry(entries, 2, [8, 108, vh + 8, vh + 108, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/same-document-root.html b/testing/web-platform/tests/intersection-observer/same-document-root.html
new file mode 100644
index 0000000000..bfb9b729aa
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/same-document-root.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+#root {
+  display: inline-block;
+  overflow-y: scroll;
+  height: 200px;
+  border: 3px solid black;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="root">
+  <div style="height: 300px;"></div>
+  <div id="target"></div>
+</div>
+<div class="spacer"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+var root, target;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "target exists");
+  root = document.getElementById("root");
+  assert_true(!!root, "root 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 in a single document with explicit root.");
+
+function step0() {
+  document.scrollingElement.scrollTop = vh;
+  runTestCycle(step1, "document.scrollingElement.scrollTop = window.innerHeight.");
+  checkLastEntry(entries, 0, [ 11, 111, vh + 411, vh + 511, 0, 0, 0, 0, 11, 111, vh + 111, vh + 311, false]);
+}
+
+function step1() {
+  root.scrollTop = 150;
+  runTestCycle(step2, "root.scrollTop = 150 with root scrolled into view.");
+  assert_equals(entries.length, 1, "No notifications after scrolling frame.");
+}
+
+function step2() {
+  document.scrollingElement.scrollTop = 0;
+  runTestCycle(step3, "document.scrollingElement.scrollTop = 0.");
+  checkLastEntry(entries, 1, [11, 111, 261, 361, 11, 111, 261, 311, 11, 111, 111, 311, true]);
+}
+
+function step3() {
+  root.scrollTop = 0;
+  runTestCycle(step4, "root.scrollTop = 0");
+  checkLastEntry(entries, 1);
+}
+
+function step4() {
+  root.scrollTop = 150;
+  runTestCycle(step5, "root.scrollTop = 150 with root scrolled out of view.");
+  checkLastEntry(entries, 2, [11, 111, vh + 411, vh + 511, 0, 0, 0, 0, 11, 111, vh + 111, vh + 311, false]);
+}
+
+// This tests that notifications are generated even when the root element is off screen.
+function step5() {
+  checkLastEntry(entries, 3, [11, 111, vh + 261, vh + 361, 11, 111, vh + 261, vh + 311, 11, 111, vh + 111, vh + 311, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/same-document-with-document-root.html b/testing/web-platform/tests/intersection-observer/same-document-with-document-root.html
new file mode 100644
index 0000000000..15cb7c4cbc
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/same-document-with-document-root.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+    pre,
+    #log {
+        position: absolute;
+        top: 0;
+        left: 200px;
+    }
+
+    .spacer {
+        height: calc(100vh + 100px);
+    }
+
+    #target {
+        width: 100px;
+        height: 100px;
+        background-color: green;
+    }
+</style>
+
+<div class="spacer"></div>
+<div id="target"></div>
+<div class="spacer"></div>
+
+<script>
+    var vw = document.documentElement.clientWidth;
+    var vh = document.documentElement.clientHeight;
+
+    var entries = [];
+    var target;
+
+    runTestCycle(function () {
+        target = document.getElementById("target");
+        assert_true(!!target, "target exists");
+        var observer = new IntersectionObserver(function (changes) {
+            entries = entries.concat(changes)
+        }, {root: document});
+        observer.observe(target);
+        entries = entries.concat(observer.takeRecords());
+        assert_equals(entries.length, 0, "No initial notifications.");
+        runTestCycle(step0, "First rAF.");
+    }, "IntersectionObserver in a single document using document as root.");
+
+    function step0() {
+        document.scrollingElement.scrollTop = 300;
+        runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
+        checkLastEntry(entries, 0, [8, 108, vh + 108, vh + 208, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+    }
+
+    function step1() {
+        document.scrollingElement.scrollTop = 0;
+        checkLastEntry(entries, 1, [8, 108, vh - 192, vh - 92, 8, 108, vh - 192, vh - 92, 0, vw, 0, vh, true]);
+    }
+</script>
+
diff --git a/testing/web-platform/tests/intersection-observer/same-document-zero-size-target.html b/testing/web-platform/tests/intersection-observer/same-document-zero-size-target.html
new file mode 100644
index 0000000000..20bd11d4be
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/same-document-zero-size-target.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+#target {
+  width: 0px;
+  height: 0px;
+  background-color: green;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="target"></div>
+<div class="spacer"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+var target;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "Target exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF");
+}, "Observing a zero-area target.");
+
+function step0() {
+  document.scrollingElement.scrollTop = 300;
+  runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
+  checkLastEntry(entries, 0, [8, 8, vh + 108, vh + 108, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+}
+
+function step1() {
+  document.scrollingElement.scrollTop = 100;
+  runTestCycle(step2, "document.scrollingElement.scrollTop = 100");
+  checkLastEntry(entries, 1, [8, 8, vh - 192, vh - 192, 8, 8, vh - 192, vh - 192, 0, vw, 0, vh, true]);
+}
+
+function step2() {
+  document.scrollingElement.scrollTop = 0;
+  checkLastEntry(entries, 2, [8, 8, vh + 8, vh + 8, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/same-origin-grand-child-iframe.sub.html b/testing/web-platform/tests/intersection-observer/same-origin-grand-child-iframe.sub.html
new file mode 100644
index 0000000000..a311a8732a
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/same-origin-grand-child-iframe.sub.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/get-host-info.sub.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+<iframe scrolling="no" frameborder="0" id="iframe"></iframe>
+<script>
+promise_test(async t => {
+  iframe.src =
+    get_host_info().HTTP_NOTSAMESITE_ORIGIN + "/intersection-observer/resources/cross-origin-child-iframe.sub.html";
+
+  const { rootBounds, intersectionRect } = await new Promise(resolve => {
+    window.addEventListener("message", event => resolve(event.data));
+  }, { once: true } );
+
+  // 300px = iframe viewport width
+  // 8px = default body margin
+  // (intersectionRect is in the coordinate space of the target iframe)
+  assert_equals(intersectionRect.top, 8);
+  assert_equals(intersectionRect.left, 200);
+  assert_equals(intersectionRect.right, 300 - 8);
+  assert_equals(intersectionRect.width, 100 - 8);
+  assert_equals(intersectionRect.height, 100);
+
+  assert_equals(rootBounds.left, 0);
+  assert_equals(rootBounds.top, 0);
+  assert_equals(rootBounds.right, document.documentElement.clientWidth);
+  assert_equals(rootBounds.bottom, document.documentElement.clientHeight);
+}, "rootBounds in a same-origin iframe in the case where there is a cross-origin "
++  "iframe in between the top document and the same origin iframe");
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-and-root-margin.html b/testing/web-platform/tests/intersection-observer/scroll-and-root-margin.html
new file mode 100644
index 0000000000..c79233d087
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-and-root-margin.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#spacer { width: 50px; height: calc(100vh + 10px); }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=spacer></div>
+<div id=target></div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "10px",
+      rootMargin: "10px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.04, 0.0001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-4-val.html b/testing/web-platform/tests/intersection-observer/scroll-margin-4-val.html
new file mode 100644
index 0000000000..04b1e4bace
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-4-val.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; }
+#spacer { width: 50px; height: 100px; }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=scroller>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "1px 2px 10px 3px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.2, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-clip-path.html b/testing/web-platform/tests/intersection-observer/scroll-margin-clip-path.html
new file mode 100644
index 0000000000..05a9cc2023
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-clip-path.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  background-color: gray;
+  clip-path: inset(10%);
+}
+#spacer { width: 50px; height: 100px; }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=scroller>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "20px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.2, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-dynamic.html b/testing/web-platform/tests/intersection-observer/scroll-margin-dynamic.html
new file mode 100644
index 0000000000..e2f697b79e
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-dynamic.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; }
+#spacer { width: 50px; height: 120px; }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=scroller>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testNoInitialIntersection, "Test no initial scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "10px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testNoInitialIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_false(entries[0].isIntersecting, "isIntersectingInitial");
+  assert_approx_equals(entries[0].intersectionRatio, 0.0, 0.001, "intersectionRatioInitial");
+
+  scroller.scrollTop = 20;
+  runTestCycle(testIntersectionAfterScroll, "Test scroll margin intersection after scrolling");
+}
+
+function testIntersectionAfterScroll() {
+  assert_equals(entries.length, 2, "IntersectionObserverEntryCount");
+  assert_true(entries[1].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[1].intersectionRatio, 0.2, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-horizontal.html b/testing/web-platform/tests/intersection-observer/scroll-margin-horizontal.html
new file mode 100644
index 0000000000..0c79167f34
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-horizontal.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; display: flex; }
+#spacer { width: 100px; height: 50px; flex-shrink: 0; }
+#target { width: 50px; height: 50px; background-color: green; flex-shrink: 0; }
+</style>
+
+<div id=scroller>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "10px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.2, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-iframe.html b/testing/web-platform/tests/intersection-observer/scroll-margin-iframe.html
new file mode 100644
index 0000000000..1d63c65169
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-iframe.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<iframe
+  id="target-iframe"
+  src="resources/iframe-no-root-subframe.html"
+  width="300"
+  height="200"
+></iframe>
+
+<script>
+var iframe = document.getElementById("target-iframe");
+var target;
+var entries = [];
+
+iframe.onload = function() {
+  runTestCycle(function() {
+    assert_true(!!iframe, "iframe exists");
+
+    target = iframe.contentDocument.getElementById("target");
+    assert_true(!!target, "Target element exists.");
+
+    var observer = new IntersectionObserver(function(changes) {
+      entries = entries.concat(changes)
+    }, {
+      scrollMargin: "18px"
+    });
+    observer.observe(target);
+
+    entries = entries.concat(observer.takeRecords());
+    assert_equals(entries.length, 0, "No initial notifications.");
+
+    runTestCycle(testIntersection, "Test scroll margin intersection");
+  }, "Observer with the implicit root; target in a same-origin iframe.");
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.1, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-nested-2.html b/testing/web-platform/tests/intersection-observer/scroll-margin-nested-2.html
new file mode 100644
index 0000000000..32cfd1ba93
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-nested-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; }
+#scroller2 { width: 130px; height: 130px; overflow: hidden; }
+#spacer { width: 50px; height: 120px; }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=scroller2>
+  <div id=spacer></div>
+  <div id=scroller>
+    <div id=target></div>
+  </div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "10px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.4, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-nested-3.html b/testing/web-platform/tests/intersection-observer/scroll-margin-nested-3.html
new file mode 100644
index 0000000000..06aaeb825b
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-nested-3.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; }
+#scroller2 { width: 130px; height: 130px; overflow: hidden; }
+#scroller3 { width: 160px; height: 160px; overflow: hidden; }
+#spacer { width: 50px; height: 100px; }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=scroller3>
+  <div id=scroller2>
+    <div id=scroller>
+      <div id=spacer></div>
+      <div id=target></div>
+    </div>
+  </div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "10px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.2, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-nested.html b/testing/web-platform/tests/intersection-observer/scroll-margin-nested.html
new file mode 100644
index 0000000000..247f545470
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-nested.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; }
+#scroller2 { width: 130px; height: 130px; overflow: hidden; }
+#spacer { width: 50px; height: 100px; }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=scroller2>
+  <div id=scroller>
+    <div id=spacer></div>
+    <div id=target></div>
+  </div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "10px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.2, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-no-intersect.html b/testing/web-platform/tests/intersection-observer/scroll-margin-no-intersect.html
new file mode 100644
index 0000000000..3259d472b5
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-no-intersect.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; }
+#spacer { width: 50px; height: 120px; }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=scroller>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "10px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_false(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.0, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-non-scrolling-root.html b/testing/web-platform/tests/intersection-observer/scroll-margin-non-scrolling-root.html
new file mode 100644
index 0000000000..9f567c2896
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-non-scrolling-root.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; }
+#spacer { width: 50px; height: 110px; background-color: darkgray; }
+#root { height: 75; width: 75; background-color: blue; }
+#target { width: 50px; height: 50px; background-color: green; }
+#spacer2 { width: 10px; height: 10px; background-color: lightgray; }
+</style>
+
+<div id=scroller>
+  <div id=spacer></div>
+  <div id=root>
+    <div id=spacer2></div>
+    <div id=target></div>
+  </div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      root: document.querySelector("#root"),
+      scrollMargin: "10px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 1.0, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-not-contained.html b/testing/web-platform/tests/intersection-observer/scroll-margin-not-contained.html
new file mode 100644
index 0000000000..b16d3471e6
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-not-contained.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; position: absolute; }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=root>
+  <div id=scroller>
+    <div id=target></div>
+  </div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      root: document.querySelector("#root"),
+      scrollMargin: "10px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  // Not insecting because root is not in the containing block chain of target.
+  assert_false(entries[0].isIntersecting, "isIntersecting");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-percent.html b/testing/web-platform/tests/intersection-observer/scroll-margin-percent.html
new file mode 100644
index 0000000000..c33cfeae28
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-percent.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; }
+#spacer { width: 50px; height: 100px; }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=scroller>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "10%"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.2, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-with-border-outline.html b/testing/web-platform/tests/intersection-observer/scroll-margin-with-border-outline.html
new file mode 100644
index 0000000000..cf95c56d8b
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-with-border-outline.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; border: 10px solid black; outline: 10px solid blue; }
+#spacer { width: 50px; height: 100px; }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=scroller>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "10px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.2, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin-zero.html b/testing/web-platform/tests/intersection-observer/scroll-margin-zero.html
new file mode 100644
index 0000000000..9f2727f695
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin-zero.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; }
+#spacer { width: 50px; height: 110px; }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=scroller>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "0px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_false(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.0, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/scroll-margin.html b/testing/web-platform/tests/intersection-observer/scroll-margin.html
new file mode 100644
index 0000000000..1b8cdd6b39
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/scroll-margin.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+#scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; }
+#spacer { width: 50px; height: 100px; }
+#target { width: 50px; height: 50px; background-color: green; }
+</style>
+
+<div id=scroller>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+
+<script>
+let entries = [];
+
+window.onload = function() {
+  runTestCycle(testIntersection, "Test scroll margin intersection");
+
+  const observer = new IntersectionObserver(
+    es => entries = entries.concat(es),
+    {
+      scrollMargin: "10px"
+    }
+  );
+  observer.observe(target);
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.2, 0.001, "intersectionRatio");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/shadow-content.html b/testing/web-platform/tests/intersection-observer/shadow-content.html
new file mode 100644
index 0000000000..ce9473cb79
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/shadow-content.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+</style>
+
+<div id="host"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+var target;
+
+runTestCycle(function() {
+  var shadowHost = document.getElementById("host");
+  assert_true(!!shadowHost, "Host exists");
+  var shadowRoot = shadowHost.attachShadow({ mode: "open" });
+  assert_true(!!shadowRoot, "Shadow root exists");
+  shadowRoot.innerHTML = "<div id='target' style='width: 100px; height: 100px; background-color: green;'></div>";
+  target = shadowRoot.getElementById("target");
+  assert_true(!!target, "target exists");
+
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF after creating shadow DOM.");
+}, "Observing a target inside shadow DOM.");
+
+function step0() {
+  checkLastEntry(entries, 0, [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/svg-clipped-rect-target.html b/testing/web-platform/tests/intersection-observer/svg-clipped-rect-target.html
new file mode 100644
index 0000000000..93ab4d9380
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/svg-clipped-rect-target.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing a clipped SVG &lt;rect> element</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/intersection-observer-test-utils.js"></script>
+<style>
+.spacer {
+  height: calc(100vh + 100px);
+}
+</style>
+<div class="spacer"></div>
+<svg viewBox="0 0 200 100" width="400">
+  <clipPath id="clip">
+    <circle cx="75" cy="50" r="20"/>
+  </clipPath>
+  <g clip-path="url(#clip)">
+    <rect id="target" x="50" y="25" width="100" height="50" fill="blue"/>
+  </g>
+</svg>
+<div class="spacer"></div>
+<script>
+const viewportWidth = document.documentElement.clientWidth;
+const viewportHeight = document.documentElement.clientHeight;
+setup(() => {
+  window.entries = [];
+  window.target = document.getElementById("target");
+  window.targetRect = target.getBoundingClientRect();
+});
+runTestCycle(function() {
+  assert_true(!!target, "target exists");
+  const observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications");
+  runTestCycle(step0, "First rAF.");
+});
+function step0() {
+  document.scrollingElement.scrollTop = 300;
+  runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
+  // The numbers in brackets are target client rect; intersection rect;
+  // and root bounds.
+  checkLastEntry(entries, 0, [
+    108, 108 + targetRect.width, viewportHeight + 158, viewportHeight + 158 + targetRect.height,
+    0, 0, 0, 0,
+    0, viewportWidth, 0, viewportHeight,
+    false,
+  ]);
+}
+function step1() {
+  document.scrollingElement.scrollTop = 100;
+  runTestCycle(step2, "document.scrollingElement.scrollTop = 100");
+  checkLastEntry(entries, 1, [
+    108, 108 + targetRect.width, viewportHeight - 142, viewportHeight - 142 + targetRect.height,
+    118, 198, viewportHeight - 132, viewportHeight - 52,
+    0, viewportWidth, 0, viewportHeight,
+    true,
+  ]);
+}
+function step2() {
+  document.scrollingElement.scrollTop = 0;
+  checkLastEntry(entries, 2, [
+    108, 108 + targetRect.width, viewportHeight + 58, viewportHeight + 58 + targetRect.height,
+    0, 0, 0, 0,
+    0, viewportWidth, 0, viewportHeight,
+    false,
+  ]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/svg-container-element.html b/testing/web-platform/tests/intersection-observer/svg-container-element.html
new file mode 100644
index 0000000000..e2b6ab5cb0
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/svg-container-element.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing an SVG container element changing position</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/intersection-observer-test-utils.js"></script>
+<svg width="400" height="10000">
+  <!-- Ensure the svg bounds are unchanged with a white fill -->
+  <rect x="-5000" y="-5000" width="100000" height="100000" fill="white"/>
+  <svg id="target" x="0" y="100vh" width="100px" height="100px">
+    <rect x="0" y="0" width="100" height="100" fill="green"/>
+  </svg>
+</svg>
+<script>
+const viewportWidth = document.documentElement.clientWidth;
+const viewportHeight = document.documentElement.clientHeight;
+setup(() => {
+  window.entries = [];
+  window.target = document.getElementById("target");
+  window.targetRect = target.getBoundingClientRect();
+});
+runTestCycle(function() {
+  assert_true(!!target, "target exists");
+  const observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes);
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications");
+  runTestCycle(step0, "First rAF.");
+});
+function step0() {
+  target.setAttribute('y', '0');
+  runTestCycle(step1, "Change inner svg element")
+  // The numbers in brackets are target client rect; intersection rect;
+  // and root bounds.
+  checkLastEntry(entries, 0, [
+    // the 8 pixels comes from the html body padding.
+    8, 8 + targetRect.width, viewportHeight+8, viewportHeight+8 + targetRect.height,
+    0, 0, 0, 0,
+    0, viewportWidth, 0, viewportHeight,
+    false,
+  ]);
+}
+function step1() {
+  checkLastEntry(entries, 1, [
+    8, 8 + targetRect.width, 8, 8 + targetRect.height,
+    8, 8 + targetRect.width, 8, 8 + targetRect.height,
+    0, viewportWidth, 0, viewportHeight,
+    true,
+  ]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/svg-group-target.html b/testing/web-platform/tests/intersection-observer/svg-group-target.html
new file mode 100644
index 0000000000..9ebf2f4025
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/svg-group-target.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing an SVG &lt;g> element</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/intersection-observer-test-utils.js"></script>
+<style>
+.spacer {
+  height: calc(100vh + 100px);
+}
+</style>
+<svg viewBox="0 0 200 100" width="400">
+  <g id="target">
+    <rect x="50" y="25" width="100" height="50" fill="blue"/>
+  </g>
+</svg>
+<script>
+const viewportWidth = document.documentElement.clientWidth;
+const viewportHeight = document.documentElement.clientHeight;
+
+setup(() => {
+  window.entries = [];
+  window.target = document.getElementById("target");
+  window.targetRect = target.getBoundingClientRect();
+  window.rect = document.querySelector("#target > rect");
+});
+
+runTestCycle(function() {
+  assert_true(!!target, "target exists");
+  const observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes);
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications");
+  runTestCycle(step0, "First rAF.");
+});
+
+function step0() {
+  rect.style.transform = "translate(0, 150px)";
+  runTestCycle(step1, "descendant rect translated down by 150 units (out of SVG viewport)");
+  // The numbers in brackets are target client rect; intersection rect;
+  // and root bounds.
+  checkLastEntry(entries, 0, [
+    108, 108 + targetRect.width, 58, 58 + targetRect.height,
+    108, 108 + targetRect.width, 58, 58 + targetRect.height,
+    0, viewportWidth, 0, viewportHeight,
+    true,
+  ]);
+}
+
+function step1() {
+  rect.style.transform = "translate(0, 50px)";
+  runTestCycle(step2, "descendant rect translated down by 100 units");
+  checkLastEntry(entries, 1, [
+    108, 108 + targetRect.width, 8 + (25 + 150) * 2, 8 + (25 + 150) * 2 + targetRect.height,
+    0, 0, 0, 0,
+    0, viewportWidth, 0, viewportHeight,
+    false,
+  ]);
+}
+
+function step2() {
+  rect.style.transform = "";
+  checkLastEntry(entries, 2, [
+    108, 108 + targetRect.width, 8 + (25 + 50) * 2, 8 + (25 + 50) * 2 + targetRect.height,
+    108, 108 + targetRect.width, 8 + (25 + 50) * 2, 8 + (25 + 50) * 2 + targetRect.height / 2,
+    0, viewportWidth, 0, viewportHeight,
+    true,
+  ]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/svg-image.html b/testing/web-platform/tests/intersection-observer/svg-image.html
new file mode 100644
index 0000000000..d5c2542820
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/svg-image.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing an SVG image element changing position</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/intersection-observer-test-utils.js"></script>
+<svg width="400" height="10000">
+    <!-- Ensure the svg bounds are unchanged with a white fill -->
+    <rect x="-5000" y="-5000" width="10000" height="10000" fill="white"/>
+    <image id="target" x="0" y="100vh" width="100px" height="100px" href="data:image/gif;base64,R0lGODlhAQABAJAAAMjIyAAAACwAAAAAAQABAAACAgQBADs%3D"/>
+</svg>
+<script>
+const viewportWidth = document.documentElement.clientWidth;
+const viewportHeight = document.documentElement.clientHeight;
+setup(() => {
+  window.entries = [];
+  window.target = document.getElementById("target");
+  window.targetRect = target.getBoundingClientRect();
+});
+runTestCycle(function() {
+  assert_true(!!target, "target exists");
+  const observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes);
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications");
+  runTestCycle(step0, "First rAF.");
+});
+function step0() {
+  target.setAttribute('y', '0');
+  runTestCycle(step1, "change image location");
+  // The numbers in brackets are target client rect; intersection rect;
+  // and root bounds.
+  checkLastEntry(entries, 0, [
+    // the 8 pixels comes from the html body padding.
+    8, 8 + targetRect.width, viewportHeight+8, viewportHeight+8 + targetRect.height,
+    0, 0, 0, 0,
+    0, viewportWidth, 0, viewportHeight,
+    false,
+  ]);
+}
+function step1() {
+    checkLastEntry(entries, 1, [
+    8, 8 + targetRect.width, 8, 8 + targetRect.height,
+    8, 8 + targetRect.width, 8, 8 + targetRect.height,
+    0, viewportWidth, 0, viewportHeight,
+    true,
+  ]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/svg-intersection-with-fractional-bounds-2.html b/testing/web-platform/tests/intersection-observer/svg-intersection-with-fractional-bounds-2.html
new file mode 100644
index 0000000000..bf0d56f77d
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/svg-intersection-with-fractional-bounds-2.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing an SVG &lt;rect> with fractional bounds element</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/intersection-observer-test-utils.js"></script>
+
+<svg id="container" width="1" height="1" viewBox="0 0 1000 1000" style="background: lightblue; position: absolute; top: 0; left: 0;">
+  <rect id="target" x="0" y="-3" width="4" height="4" fill="green"></rect>
+</svg>
+
+<script>
+  setup(() => {
+    window.entries = [];
+    window.target = document.getElementById("target");
+    window.targetRect = target.getBoundingClientRect();
+  });
+  var epsilon = 0.0001;
+  runTestCycle(function() {
+    assert_true(!!target, "target exists");
+    var observer = new IntersectionObserver(changes => {
+        entries = entries.concat(changes);
+      }, {root: container, threshold: [0, 0.25, 0.5, 0.7, 1]});
+    observer.observe(target);
+    entries = entries.concat(observer.takeRecords());
+    assert_equals(entries.length, 0, "No initial notifications");
+    runTestCycle(step0, "Initial Observation");
+  });
+  function step0() {
+    target.setAttribute('y', -2);
+    runTestCycle(step1, "Changing target y position to -2 (-0.002 in root coordinates)");
+    checkLastEntry(entries, 0, [
+      0, 0.004, -0.003, 0.001,
+      0, 0.004, 0, 0.001,
+      0, 1, 0, 1,
+      true,
+    ], epsilon);
+  }
+  function step1() {
+    target.setAttribute('y', -1);
+    runTestCycle(step2, "Changing target y position to -1 (-0.001 in root coordinates)");
+    checkLastEntry(entries, 1, [
+      0, 0.004, -0.002, 0.002,
+      0, 0.004, 0, 0.002,
+      0, 1, 0, 1,
+      true,
+    ], epsilon);
+  }
+  function step2() {
+    target.setAttribute('y', -4);
+    runTestCycle(step3, "Changing target y position to -4 (-0.004 in root coordinates)");
+    checkLastEntry(entries, 2, [
+      0, 0.004, -0.001, 0.003,
+      0, 0.004, 0, 0.003,
+      0, 1, 0, 1,
+      true,
+    ], epsilon);
+  }
+  function step3() {
+    target.setAttribute('y', 0);
+    runTestCycle(step4, "Changing target y position to 0");
+    checkLastEntry(entries, 3, [
+      0, 0.004, -0.004, 0,
+      0, 0.004, 0, 0,
+      0, 1, 0, 1,
+      true,
+    ], epsilon);
+  }
+  function step4() {
+    checkLastEntry(entries, 4, [
+      0, 0.004, 0, 0.004,
+      0, 0.004, 0, 0.004,
+      0, 1, 0, 1,
+      true,
+    ], epsilon);
+  }
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/svg-intersection-with-fractional-bounds.html b/testing/web-platform/tests/intersection-observer/svg-intersection-with-fractional-bounds.html
new file mode 100644
index 0000000000..c07c4f737c
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/svg-intersection-with-fractional-bounds.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing an SVG &lt;rect> with fractional bounds element</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/intersection-observer-test-utils.js"></script>
+<style>
+.spacer {
+  height: calc(100vh + 100px);
+}
+</style>
+<div class="spacer"></div>
+<svg viewBox="0 0 200 100" width="4" display="block">
+  <rect id="target" x="50" y="5" width="100" height="50" fill="blue"/>
+</svg>
+<div class="spacer"></div>
+<script>
+const viewportWidth = document.documentElement.clientWidth;
+const viewportHeight = document.documentElement.clientHeight;
+setup(() => {
+  window.entries = [];
+  window.target = document.getElementById("target");
+  window.targetRect = target.getBoundingClientRect();
+});
+var epsilon = 0.0001;
+runTestCycle(function() {
+  assert_true(!!target, "target exists");
+  const observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes);
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications");
+  runTestCycle(step0, "Initial Observation");
+});
+function step0() {
+  document.scrollingElement.scrollTop = 300;
+  runTestCycle(step1, "Intersection observation after scrolling 300");
+  // The numbers in brackets are target client rect; intersection rect;
+  // and root bounds.
+  checkLastEntry(entries, 0, [
+    // the 8 pixels comes from the html body padding.
+    1 + 8, 1 + 8 + targetRect.width, 8 + viewportHeight + 100 + 0.1, viewportHeight + 100 + 0.1 + 8 + targetRect.height,
+    0, 0, 0, 0,
+    0, viewportWidth, 0, viewportHeight,
+    false,
+  ], epsilon);
+}
+function step1() {
+  document.scrollingElement.scrollTop = 100;
+  runTestCycle(step2, "Intersection observation after scrolling 100");
+  checkLastEntry(entries, 1, [
+    1 + 8, 1 + 8 + targetRect.width, 8 + viewportHeight - 200 + 0.1, viewportHeight - 200 + 0.1 + 8 + targetRect.height,
+    1 + 8, 1 + 8 + targetRect.width, 8 + viewportHeight - 200 + 0.1, viewportHeight - 200 + 0.1 + 8 + targetRect.height,
+    0, viewportWidth, 0, viewportHeight,
+    true,
+  ], epsilon);
+}
+function step2() {
+  document.scrollingElement.scrollTop = 0;
+  checkLastEntry(entries, 2, [
+    1 + 8, 1 + 8 + targetRect.width, 8 + viewportHeight + 0.1, viewportHeight + 0.1 + 8 + targetRect.height,
+    0, 0, 0, 0,
+    0, viewportWidth, 0, viewportHeight,
+    false,
+  ], epsilon);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/svg-rect-target.html b/testing/web-platform/tests/intersection-observer/svg-rect-target.html
new file mode 100644
index 0000000000..e6e639577f
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/svg-rect-target.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing an SVG &lt;rect> element</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/intersection-observer-test-utils.js"></script>
+<style>
+.spacer {
+  height: calc(100vh + 100px);
+}
+</style>
+<div class="spacer"></div>
+<svg viewBox="0 0 200 100" width="400">
+  <rect id="target" x="50" y="25" width="100" height="50" fill="blue"/>
+</svg>
+<div class="spacer"></div>
+<script>
+const viewportWidth = document.documentElement.clientWidth;
+const viewportHeight = document.documentElement.clientHeight;
+setup(() => {
+  window.entries = [];
+  window.target = document.getElementById("target");
+  window.targetRect = target.getBoundingClientRect();
+});
+runTestCycle(function() {
+  assert_true(!!target, "target exists");
+  const observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes);
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications");
+  runTestCycle(step0, "First rAF.");
+});
+function step0() {
+  document.scrollingElement.scrollTop = 300;
+  runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
+  // The numbers in brackets are target client rect; intersection rect;
+  // and root bounds.
+  checkLastEntry(entries, 0, [
+    // the 8 pixels comes from the html body padding.
+    100 + 8, 100 + 8 + targetRect.width, viewportHeight + 150 + 8, viewportHeight + 150 + 8 + targetRect.height,
+    0, 0, 0, 0,
+    0, viewportWidth, 0, viewportHeight,
+    false,
+  ]);
+}
+function step1() {
+  document.scrollingElement.scrollTop = 100;
+  runTestCycle(step2, "document.scrollingElement.scrollTop = 100");
+  checkLastEntry(entries, 1, [
+    100 + 8, 100 + 8 + targetRect.width, viewportHeight - 150 + 8, viewportHeight - 150 + 8 + targetRect.height,
+    100 + 8, 100 + 8 + targetRect.width, viewportHeight - 150 + 8, viewportHeight - 150 + 8 + targetRect.height,
+    0, viewportWidth, 0, viewportHeight,
+    true,
+  ]);
+}
+function step2() {
+  document.scrollingElement.scrollTop = 0;
+  checkLastEntry(entries, 2, [
+    100 + 8, 100 + 8 + targetRect.width, viewportHeight + 50 + 8, viewportHeight + 50 + 8 + targetRect.height,
+    0, 0, 0, 0,
+    0, viewportWidth, 0, viewportHeight,
+    false,
+  ]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/svg-stroke-change.html b/testing/web-platform/tests/intersection-observer/svg-stroke-change.html
new file mode 100644
index 0000000000..3f01a2a23d
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/svg-stroke-change.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing an SVG element while its stroke is changed</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/intersection-observer-test-utils.js"></script>
+<svg width="400" height="10000">
+  <!-- Ensure the svg bounds are unchanged with a white fill -->
+  <rect x="-5000" y="-5000" width="10000" height="10000" fill="white"/>
+  <rect id="target" x="0" y="100vh" width="100px" height="100px" stroke="green" stroke-width="0"/>
+</svg>
+<script>
+const viewportWidth = document.documentElement.clientWidth;
+const viewportHeight = document.documentElement.clientHeight;
+setup(() => {
+  window.entries = [];
+  window.target = document.getElementById("target");
+  window.targetRect = target.getBoundingClientRect();
+});
+runTestCycle(function() {
+  assert_true(!!target, "target exists");
+  const observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes);
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications");
+  runTestCycle(step0, "First rAF.");
+});
+function step0() {
+  target.setAttribute('stroke-width', '30');
+  runTestCycle(step1, "change stroke");
+  // The numbers in brackets are target client rect; intersection rect;
+  // and root bounds.
+  checkLastEntry(entries, 0, [
+    8, 8 + targetRect.width, viewportHeight+8, viewportHeight+8 + targetRect.height,
+    0, 0, 0, 0,
+    0, viewportWidth, 0, viewportHeight,
+    false,
+  ]);
+}
+function step1() {
+  checkLastEntry(entries, 1, [
+    // The stroke width is divided by 2, as half of the stroke is inside the shape
+    8-30/2, 8 + targetRect.width + 30/2, viewportHeight+8 -30/2, viewportHeight+8 + targetRect.height + 30/2,
+    8, 8 + targetRect.width + 30/2, viewportHeight-7, viewportHeight,
+    0, viewportWidth, 0, viewportHeight,
+    true,
+  ]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/svg-target-changes-position.html b/testing/web-platform/tests/intersection-observer/svg-target-changes-position.html
new file mode 100644
index 0000000000..b15d7ca0d6
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/svg-target-changes-position.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing an SVG element changing position</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/intersection-observer-test-utils.js"></script>
+<svg width="100" height="10000">
+  <!-- Ensure the svg bounds are unchanged with a white fill -->
+  <rect x="0" y="0" width="100" height="10000" fill="white"/>
+
+  <rect id="target" x="0" y="9000" width="100" height="100" fill="blue"/>
+</svg>
+<script>
+const viewportWidth = document.documentElement.clientWidth;
+const viewportHeight = document.documentElement.clientHeight;
+setup(() => {
+  window.entries = [];
+  window.target = document.getElementById("target");
+  window.targetRect = target.getBoundingClientRect();
+});
+runTestCycle(function() {
+  assert_true(!!target, "target exists");
+  const observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes);
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications");
+  runTestCycle(step0, "First rAF.");
+});
+function step0() {
+  target.setAttribute('y', '0');
+  runTestCycle(step1, "Move SVG element up");
+  // The numbers in brackets are target client rect; intersection rect;
+  // and root bounds.
+  checkLastEntry(entries, 0, [
+    // the 8 pixels comes from the html body padding.
+    8, 100 + 8, 9000 + 8, 9000 + 8 + targetRect.height,
+    0, 0, 0, 0,
+    0, viewportWidth, 0, viewportHeight,
+    false,
+  ]);
+}
+function step1() {
+  checkLastEntry(entries, 1, [
+    8, 8 + targetRect.width, 8, 8 + targetRect.height,
+    8, 8 + targetRect.width, 8, 8 + targetRect.height,
+    0, viewportWidth, 0, viewportHeight,
+    true,
+  ]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/svg-transformed-rect-target.html b/testing/web-platform/tests/intersection-observer/svg-transformed-rect-target.html
new file mode 100644
index 0000000000..c284d65076
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/svg-transformed-rect-target.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing an SVG &lt;rect> element with changing 'transform'</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/intersection-observer-test-utils.js"></script>
+<svg viewBox="0 0 200 100" width="400">
+  <rect id="target" x="50" y="25" width="100" height="50" fill="blue"/>
+</svg>
+<script>
+const viewportWidth = document.documentElement.clientWidth;
+const viewportHeight = document.documentElement.clientHeight;
+setup(() => {
+  window.entries = [];
+  window.target = document.getElementById("target");
+  window.targetRect = target.getBoundingClientRect();
+});
+runTestCycle(function() {
+  assert_true(!!target, "target exists");
+  const observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes);
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications");
+  runTestCycle(step0, "First rAF.");
+});
+function step0() {
+  target.style.transform = "translate(0, 150px)";
+  runTestCycle(step1, "translated down by 150 units (out of SVG viewport)");
+  // The numbers in brackets are target client rect; intersection rect;
+  // and root bounds.
+  checkLastEntry(entries, 0, [
+    108, 108 + targetRect.width, 58, 58 + targetRect.height,
+    108, 108 + targetRect.width, 58, 58 + targetRect.height,
+    0, viewportWidth, 0, viewportHeight,
+    true,
+  ]);
+}
+function step1() {
+  target.style.transform = "translate(0, 50px)";
+  runTestCycle(step2, "translated down by 50 units");
+  checkLastEntry(entries, 1, [
+    108, 108 + targetRect.width, 8 + (25 + 150) * 2, 8 + (25 + 150) * 2 + targetRect.height,
+    0, 0, 0, 0,
+    0, viewportWidth, 0, viewportHeight,
+    false,
+  ]);
+}
+function step2() {
+  target.style.transform = "";
+  checkLastEntry(entries, 2, [
+    108, 108 + targetRect.width, 8 + (25 + 50) * 2, 8 + (25 + 50) * 2 + targetRect.height,
+    108, 108 + targetRect.width, 8 + (25 + 50) * 2, 8 + (25 + 50) * 2 + targetRect.height / 2,
+    0, viewportWidth, 0, viewportHeight,
+    true,
+  ]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/svg-viewbox.html b/testing/web-platform/tests/intersection-observer/svg-viewbox.html
new file mode 100644
index 0000000000..718b97624a
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/svg-viewbox.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing an SVG &lt;rect> element with changing 'transform'</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/intersection-observer-test-utils.js"></script>
+<svg id="container" width="10" height="10" viewBox="0 0 128 128" style="background: lightblue; position: absolute; top: 0; left: 0;">
+    <rect id="target" x="0" y="0" width="128" height="128" fill="green"></rect>
+</svg>
+<script>
+const viewportWidth = document.documentElement.clientWidth;
+const viewportHeight = document.documentElement.clientHeight;
+setup(() => {
+  window.entries = [];
+  window.target = document.getElementById("target");
+  window.targetRect = target.getBoundingClientRect();
+});
+runTestCycle(function() {
+  assert_true(!!target, "target exists");
+  const observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes);
+  }, {root: container, threshold: [0, 0.5, 1]});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications");
+  runTestCycle(step0, "First rAF.");
+});
+function step0() {
+  target.setAttribute('y', '-64');
+  runTestCycle(step1, "change target's y property to -64)");
+  // The numbers in brackets are target client rect; intersection rect;
+  // and root bounds.
+  checkLastEntry(entries, 0, [
+    0, targetRect.width, 0, targetRect.height,
+    0, targetRect.width, 0, targetRect.height,
+    0, 10, 0, 10,
+    true,
+  ]);
+}
+function step1() {
+  target.style.transform = "translate(0, 50px)";
+  checkLastEntry(entries, 1, [
+    0, targetRect.width, -5, -5 + targetRect.height,
+    0, targetRect.width, 0, -5 + targetRect.height,
+    0, 10, 0, 10,
+    true,
+  ]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/target-in-detached-document.html b/testing/web-platform/tests/intersection-observer/target-in-detached-document.html
new file mode 100644
index 0000000000..6a5cf1e811
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/target-in-detached-document.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+var target;
+
+runTestCycle(function() {
+  var detached_document = document.implementation.createHTMLDocument("test");
+  target = detached_document.createElement("div");
+  target.id = "target";
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  runTestCycle(step0, "First rAF.");
+}, "IntersectionObserver in a single document using the implicit root.");
+
+function step0() {
+  document.adoptNode(target);
+  document.body.appendChild(target);
+  checkLastEntry(entries, 0, [0, 0, 0, 0, 0, 0, 0, 0]);
+  runTestCycle(step1, "Adopt target.");
+}
+
+function step1() {
+  checkLastEntry(entries, 1, [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/target-in-different-window.html b/testing/web-platform/tests/intersection-observer/target-in-different-window.html
new file mode 100644
index 0000000000..fcf5ba9437
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/target-in-different-window.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<!--
+  NOTE(emilio): This tests Chrome's behavior but it's not clear that's what the
+  spec asks for, see https://github.com/w3c/IntersectionObserver/issues/456
+-->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<script>
+var entries = [];
+var popup, target;
+
+function waitForPopupNotification(f) {
+  popup.requestAnimationFrame(function() {
+    popup.requestAnimationFrame(function() { popup.setTimeout(f); });
+  });
+}
+
+async_test((t) => {
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes);
+  });
+  popup = window.open();
+  t.add_cleanup(() => popup.close());
+  target = popup.document.createElement('div');
+  target.style.width = "100px";
+  target.style.height = "100px";
+  observer.observe(target);
+  waitForPopupNotification(t.step_func(() => {
+    assert_equals(entries.length, 1, "Initial notification for detached target.");
+    assert_equals(entries[0].isIntersecting, false, "not intersecting");
+    popup.document.body.appendChild(target);
+    waitForPopupNotification(t.step_func_done(() => {
+      assert_equals(entries.length, 2, "Notification after insertion into popup.");
+      assert_equals(entries[1].isIntersecting, true, "intersecting");
+    }));
+  }));
+}, "IntersectionObserver with target in a different window.");
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/target-is-root.html b/testing/web-platform/tests/intersection-observer/target-is-root.html
new file mode 100644
index 0000000000..1fe2ae6e17
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/target-is-root.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>IntersectionObserver when root == target doesn't compute an intersection</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1682915">
+<link rel="help" href="https://w3c.github.io/IntersectionObserver/#update-intersection-observations-algo">
+<!--
+  Quoting IntersectionObserver section 3.2.8, "Run the Update Intersection Observations Steps", step 2, substep 3:
+
+    If the intersection root is an Element, and target is not a descendant of
+    the intersection root in the containing block chain, skip to step 11.
+
+-->
+<style>
+  #container {
+    overflow: scroll;
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id=container>
+  <div></div>
+</div>
+<script>
+async_test(function(t) {
+  let container = document.getElementById("container");
+  let observer = new IntersectionObserver(t.step_func_done(function(entries) {
+    assert_equals(entries.length, 1);
+    assert_equals(entries[0].intersectionRatio, 0);
+    assert_equals(entries[0].isIntersecting, false);
+  }), { root: container });
+  observer.observe(container);
+});
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/text-target.html b/testing/web-platform/tests/intersection-observer/text-target.html
new file mode 100644
index 0000000000..1abe5357c2
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/text-target.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+</style>
+
+<div class="spacer"></div>
+<br id="target">
+<div class="spacer"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+var target;
+var tw, th;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  let target_rect = target.getBoundingClientRect();
+  tw = target_rect.width;
+  th = target_rect.height;
+  assert_true(!!target, "target exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.");
+}, "IntersectionObserver observing a br element.");
+
+function step0() {
+  document.scrollingElement.scrollTop = 300;
+  runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
+  // The numbers in brackets are target client rect; intersection rect;
+  // and root bounds.
+  checkLastEntry(entries, 0, [8, 8 + tw, vh + 108, vh + 108 + th, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+}
+
+function step1() {
+  document.scrollingElement.scrollTop = 100;
+  runTestCycle(step2, "document.scrollingElement.scrollTop = 100");
+  checkLastEntry(entries, 1, [8, 8 + tw, vh - 192, vh - 192 + th, 8, 8 + tw, vh - 192, vh - 192 + th, 0, vw, 0, vh, true]);
+}
+
+function step2() {
+  document.scrollingElement.scrollTop = 0;
+  checkLastEntry(entries, 2, [8, 8 + tw, vh + 8, vh + 8 + th, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/timestamp.html b/testing/web-platform/tests/intersection-observer/timestamp.html
new file mode 100644
index 0000000000..3f573bcd88
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/timestamp.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+
+</style>
+<div id="leading-space" class="spacer"></div>
+<div id="trailing-space" class="spacer"></div>
+
+<script>
+// Pick this number to be comfortably greater than the length of two frames at 60Hz.
+var timeSkew = 40;
+
+var topWindowEntries = [];
+var iframeWindowEntries = [];
+var targetIframe;
+var topWindowTimeBeforeNotification;
+var iframeWindowTimeBeforeNotification;
+
+async_test(function(t) {
+  t.step_timeout(function() {
+    targetIframe = document.createElement("iframe");
+    assert_true(!!targetIframe, "iframe exists");
+    targetIframe.src = "resources/timestamp-subframe.html";
+    var trailingSpace = document.getElementById("trailing-space");
+    assert_true(!!trailingSpace, "trailing-space exists");
+    trailingSpace.parentNode.insertBefore(targetIframe, trailingSpace);
+    targetIframe.onload = function() {
+      var target = targetIframe.contentDocument.getElementById("target");
+      var iframeScroller = targetIframe.contentDocument.scrollingElement;
+
+      // Observer created here, callback created in iframe context.  Timestamps should be
+      // from this window.
+      var observer = new IntersectionObserver(
+          targetIframe.contentDocument.createObserverCallback(topWindowEntries), {});
+      assert_true(!!observer, "Observer exists");
+      observer.observe(target);
+
+      // Callback created here, observer created in iframe.  Timestamps should be
+      // from iframe window.
+      observer = targetIframe.contentDocument.createObserver(function(newEntries) {
+        iframeWindowEntries = iframeWindowEntries.concat(newEntries);
+      });
+      observer.observe(target);
+      runTestCycle(step1, "First rAF after iframe is loaded.");
+      t.done();
+    };
+  }, timeSkew);
+}, "Check that timestamps correspond to the to execution context that created the observer.");
+
+function step1() {
+  document.scrollingElement.scrollTop = 200;
+  targetIframe.contentDocument.scrollingElement.scrollTop = 250;
+  topWindowTimeBeforeNotification = performance.now();
+  iframeWindowTimeBeforeNotification = targetIframe.contentWindow.performance.now();
+  runTestCycle(step2, "Generate notifications.");
+  assert_equals(topWindowEntries.length, 1, "One notification to top window observer.");
+  assert_equals(iframeWindowEntries.length, 1, "One notification to iframe observer.");
+}
+
+function step2() {
+  document.scrollingElement.scrollTop = 0;
+  var topWindowTimeAfterNotification = performance.now();
+  var iframeWindowTimeAfterNotification = targetIframe.contentWindow.performance.now();
+
+  assert_approx_equals(
+      topWindowEntries[1].time - topWindowTimeBeforeNotification,
+      iframeWindowEntries[1].time - iframeWindowTimeBeforeNotification,
+      // Since all intersections are computed in a tight loop between 2 frames,
+      // an epsilon of 16ms (the length of one frame at 60Hz) turned out to be
+      // reliable, even at slow frame rates.
+      16,
+      "Notification times are relative to the expected time origins");
+
+  assert_equals(topWindowEntries.length, 2, "Top window observer has two notifications.");
+  assert_between_inclusive(
+      topWindowEntries[1].time,
+      topWindowTimeBeforeNotification,
+      topWindowTimeAfterNotification,
+      "Notification to top window observer is within the expected range.");
+
+  assert_equals(iframeWindowEntries.length, 2, "Iframe observer has two notifications.");
+  assert_between_inclusive(
+      iframeWindowEntries[1].time,
+      iframeWindowTimeBeforeNotification,
+      iframeWindowTimeAfterNotification,
+      "Notification to iframe observer is within the expected range.");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/unclipped-root.html b/testing/web-platform/tests/intersection-observer/unclipped-root.html
new file mode 100644
index 0000000000..a59105e33e
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/unclipped-root.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#root {
+  overflow: visible;
+  height: 200px;
+  width: 160px;
+  border: 7px solid black;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<div id="root">
+  <div id="target" style="transform: translateY(300px)"></div>
+</div>
+
+<script>
+var entries = [];
+var target;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "target exists");
+  var root = document.getElementById("root");
+  assert_true(!!root, "root 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.");
+}, "Test that border bounding box is used to calculate intersection with a non-scrolling root.");
+
+function step0() {
+  target.style.transform = "translateY(195px)";
+  runTestCycle(step1, "target.style.transform = 'translateY(195px)'");
+  checkLastEntry(entries, 0, [15, 115, 315, 415, 0, 0, 0, 0, 8, 182, 8, 222, false]);
+}
+
+function step1() {
+  target.style.transform = "";
+  checkLastEntry(entries, 1, [15, 115, 210, 310, 15, 115, 210, 222, 8, 182, 8, 222, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/animated-occlusion.html b/testing/web-platform/tests/intersection-observer/v2/animated-occlusion.html
new file mode 100644
index 0000000000..fa69733b9f
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/animated-occlusion.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(45deg);
+  }
+}
+#occluder {
+  will-change: transform;
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+}
+</style>
+
+<div id="target"></div>
+<div id="occluder"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+var delay = 100;
+var entries = [];
+var target;
+var occluder;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  occluder = document.getElementById("occluder");
+  assert_true(!!target, "target exists");
+  assert_true(!!occluder, "occluder exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.", delay);
+}, "IntersectionObserverV2 in a single document using the implicit root, with an animated occluding element.", delay);
+
+function step0() {
+  occluder.style.animation = "rotate .1s linear";
+  step_timeout(() => {
+    runTestCycle(step1, "occluder.style.animation = 'rotate .1s linear'", delay);
+  }, 50);
+  checkLastEntry(entries, 0, [0, 100, 0, 100, 0, 100, 0, 100, 0, vw, 0, vh, true, true]);
+}
+
+function step1() {
+  checkLastEntry(entries, 1, [0, 100, 0, 100, 0, 100, 0, 100, 0, vw, 0, vh, true, false]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/blur-filter.html b/testing/web-platform/tests/intersection-observer/v2/blur-filter.html
new file mode 100644
index 0000000000..8cf63066e1
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/blur-filter.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+#occluder {
+  margin-top: 10px;
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  filter: blur(50px);
+}
+</style>
+
+<div id="target"></div>
+<div id="occluder"></div>
+
+<script>
+var delay = 100;
+var entries = [];
+var target;
+var occluder;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  occluder = document.getElementById("occluder");
+  assert_true(!!target, "target exists");
+  assert_true(!!occluder, "occluder exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.", delay);
+}, "IntersectionObserverV2 in a single document using the implicit root, with an occluding element.", delay);
+
+function step0() {
+  // Occluding elements with opacity=0 should not affect target visibility.
+  occluder.style.opacity = "0";
+  runTestCycle(step2, "occluder.style.opacity = 0", delay);
+
+  // First notification should report occlusion due to blur filter.
+  checkLastEntry(entries, 0, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, false]);
+}
+
+function step2() {
+  checkLastEntry(entries, 1, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/box-shadow.html b/testing/web-platform/tests/intersection-observer/v2/box-shadow.html
new file mode 100644
index 0000000000..765fa8b2d5
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/box-shadow.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+iframe {
+  width: 100px;
+  height: 100px;
+  border: 0;
+}
+#box-shadow {
+  display: inline-block;
+  box-shadow: -50px -50px 0 50px rgba(255, 0, 0, 0.7);
+}
+</style>
+
+<iframe id=target srcdoc="<!DOCTYPE html><div>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</div>"></iframe><div id=box-shadow></div>
+
+<script>
+var delay = 100;
+var entries = [];
+var target;
+var occluder;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  occluder = document.getElementById("box-shadow");
+  assert_true(!!target, "target exists");
+  assert_true(!!occluder, "occluder exists");
+  let observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.", delay);
+}, "IntersectionObserverV2 observing an iframe element.", delay);
+
+function step0() {
+  occluder.style.boxShadow = "none";
+  runTestCycle(step1, 'occluder.style.boxShadow = "none"', delay);
+  assert_equals(entries.length, 1, "Initial notification.");
+  assert_equals(entries[0].isVisible, false, "Initially occluded.");
+}
+
+function step1() {
+  occluder.style.boxShadow = "";
+  runTestCycle(step2, 'occluder.style.boxShadow = ""', delay);
+  assert_equals(entries.length, 2, "Notification after removing box shadow.");
+  assert_equals(entries[1].isVisible, true, "Visible when box shadow removed.");
+}
+
+function step2() {
+  assert_equals(entries.length, 3, "Notification after re-adding box shadow.");
+  assert_equals(entries[2].isVisible, false, "Occluded when box shadow re-added.");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/cross-origin-effects.sub.html b/testing/web-platform/tests/intersection-observer/v2/cross-origin-effects.sub.html
new file mode 100644
index 0000000000..5f328bec99
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/cross-origin-effects.sub.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+</style>
+
+<div id="container">
+  <iframe src="http://{{domains[www1]}}:{{ports[http][0]}}/intersection-observer/resources/v2-subframe.html"></iframe>
+</div>
+
+<script>
+async_test(function(t) {
+  let container = document.getElementById("container");
+  let iframe = document.querySelector("iframe");
+
+  function step0(event) {
+    assert_equals(event.data,"");
+  }
+
+  function step1(event) {
+    container.style.opacity = "0.99";
+    assert_equals(JSON.stringify(event.data),
+                  JSON.stringify([true]));
+  }
+
+  function step2(event) {
+    container.style.opacity = "";
+    assert_equals(JSON.stringify(event.data),
+                  JSON.stringify([false]));
+  }
+
+  function step3(event) {
+    container.style.transform = "skew(30deg)";
+    assert_equals(JSON.stringify(event.data),
+                  JSON.stringify([true]));
+  }
+
+  function step4(event) {
+    assert_equals(JSON.stringify(event.data),
+                  JSON.stringify([false]));
+  }
+
+  let steps = [step0, step1, step2, step3, step4];
+
+  window.addEventListener("message", event => {
+    if (steps.length) {
+      t.step(steps.shift(), t, event);
+      waitForFrame(t, () => {
+        iframe.contentWindow.postMessage("", "*")
+      });
+    } else {
+      t.done();
+    }
+  });
+
+}, "Intersection observer V2 test with visual effects on iframe.");
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/cross-origin-occlusion.sub.html b/testing/web-platform/tests/intersection-observer/v2/cross-origin-occlusion.sub.html
new file mode 100644
index 0000000000..4c2f286afb
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/cross-origin-occlusion.sub.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+iframe {
+  width: 300px;
+  height: 150px;
+  border: none;
+}
+#occluder {
+  will-change: transform;
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<iframe src="http://{{domains[www1]}}:{{ports[http][0]}}/intersection-observer/resources/v2-subframe.html"></iframe>
+<div id="occluder"></div>
+
+<script>
+async_test(function(t) {
+  let iframe = document.querySelector("iframe");
+  let occluder = document.getElementById("occluder");
+
+  function step0(event) {
+    assert_equals(event.data,"");
+  }
+
+  function step1(event) {
+    occluder.style.marginTop = "-150px";
+    assert_equals(JSON.stringify(event.data),
+                  JSON.stringify([true]));
+  }
+
+  function step2(event) {
+    occluder.style.marginTop = "";
+    assert_equals(JSON.stringify(event.data),
+                  JSON.stringify([false]));
+  }
+
+  function step3(event) {
+    assert_equals(JSON.stringify(event.data),
+                  JSON.stringify([true]));
+  }
+
+  let steps = [step0, step1, step2, step3];
+
+  window.addEventListener("message", event => {
+    if (steps.length) {
+      t.step(steps.shift(), t, event);
+      waitForFrame(t, () => {
+        iframe.contentWindow.postMessage("", "*");
+      });
+    } else {
+      t.done();
+    }
+  });
+
+}, "Intersection observer V2 test with occlusion of target in iframe.");
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/delay-test.html b/testing/web-platform/tests/intersection-observer/v2/delay-test.html
new file mode 100644
index 0000000000..e3906ea2c2
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/delay-test.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+#occluder {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+}
+</style>
+
+<div id="target"></div>
+<div id="occluder"></div>
+
+<script>
+async_test(t => {
+  let entries = [];
+  let delay = 100;
+  let target = document.getElementById("target");
+  let occluder = document.getElementById("occluder");
+
+  assert_true(!!target, "target exists");
+  assert_true(!!occluder, "occluder exists");
+  let observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  // The first notification should be sent without delay.
+  waitForNotification(t, t.step_func(step0));
+
+  function waitForDelay(timerExpiredBeforeLastFrame, nextStep) {
+    requestAnimationFrame(t.step_func(() => {
+      if (timerExpiredBeforeLastFrame) {
+        // New notifications should have been generated during the previous
+        // frame and delivered by now.
+        assert_equals(entries.length, 2);
+        assert_greater_than(entries[1].time - entries[0].time, delay);
+        assert_false(entries[1].isVisible);
+        nextStep();
+      } else {
+        // Observer may not have updated yet. Wait for next frame.
+        let timerExpired = performance.now() - entries[0].time >= delay;
+        waitForDelay(timerExpired, nextStep);
+      }
+    }));
+  }
+
+  function step0() {
+    assert_equals(entries.length, 1);
+    assert_true(entries[0].isVisible);
+    // This should trigger a notification on the next run.
+    occluder.style.marginTop = "-10px";
+    // Enter a rAF loop until the delay timer expires.
+    waitForDelay(false, step1);
+  }
+
+  function step1() {
+    occluder.style.marginTop = "10px";
+    // This style invalidation should cause a frame to run before the observer
+    // can generate a notification (due to delay parameter). Make sure the
+    // notification will still be generated even if we don't force more frames
+    // with a rAF loop.
+    t.step_timeout(() => {
+      assert_equals(entries.length, 3);
+      assert_true(entries[0].isVisible);
+      t.done();
+    }, 2 * delay);
+  }
+
+}, "'delay' parameter throttles frequency of notifications.");
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/drop-shadow-filter-vertical-rl.html b/testing/web-platform/tests/intersection-observer/v2/drop-shadow-filter-vertical-rl.html
new file mode 100644
index 0000000000..fc5b145e1f
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/drop-shadow-filter-vertical-rl.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 150px;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+  float: left;
+}
+#occluder {
+  float: left;
+  margin-left: 10px;
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  filter: drop-shadow(-50px 0);
+  writing-mode: vertical-rl;
+}
+</style>
+
+<div id="target"></div>
+<div id="occluder"></div>
+
+<script>
+var delay = 100;
+var entries = [];
+var target;
+var occluder;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  occluder = document.getElementById("occluder");
+  assert_true(!!target, "target exists");
+  assert_true(!!occluder, "occluder exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.", delay);
+}, "IntersectionObserverV2 in a single document using the implicit root, with an occluding element.", delay);
+
+function step0() {
+  // Occluding elements with opacity=0 should not affect target visibility.
+  occluder.style.opacity = "0";
+  runTestCycle(step2, "occluder.style.opacity = 0", delay);
+
+  // First notification should report occlusion due to drop shadow filter.
+  checkLastEntry(entries, 0, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, false]);
+}
+
+function step2() {
+  checkLastEntry(entries, 1, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/iframe-target.html b/testing/web-platform/tests/intersection-observer/v2/iframe-target.html
new file mode 100644
index 0000000000..53fbff86b7
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/iframe-target.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+iframe {
+  width: 150px;
+  height: 100px;
+  border: 0;
+}
+</style>
+
+<iframe srcdoc="<!DOCTYPE html><div>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</div>"></iframe>
+
+<script>
+var delay = 100;
+var entries = [];
+var target;
+
+runTestCycle(function() {
+  target = document.querySelector("iframe");
+  assert_true(!!target, "target exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.", delay);
+}, "IntersectionObserverV2 observing an iframe element.", delay);
+
+function step0() {
+  checkLastEntry(entries, 0, [0, 150, 0, 100, 0, 150, 0, 100, 0, 800, 0, 600, true, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/inline-occlusion.html b/testing/web-platform/tests/intersection-observer/v2/inline-occlusion.html
new file mode 100644
index 0000000000..e4b097e62a
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/inline-occlusion.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.testdiv {
+  font-size: 24px;
+}
+</style>
+
+<div class="testdiv">This is the <span id="target">target</span>.</div>
+<div class="testdiv" id="occluder">This is the occluder.</div>
+
+<script>
+var delay = 100;
+var entries = [];
+var target;
+var occluder;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  occluder = document.getElementById("occluder");
+  assert_true(!!target, "target exists");
+  assert_true(!!occluder, "occluder exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.", delay);
+}, "IntersectionObserverV2 in a single document using the implicit root, with an occluding element.", delay);
+
+function step0() {
+  occluder.style.marginTop = "-10px";
+  runTestCycle(step1, "occluder.style.marginTop = '-10px'", delay);
+  assert_equals(entries.length, 1);
+  assert_true(entries[0].isVisible);
+}
+
+function step1() {
+  // Occluding elements with opacity=0 should not affect target visibility.
+  occluder.style.opacity = "0";
+  runTestCycle(step2, "occluder.style.opacity = 0", delay);
+  assert_equals(entries.length, 2);
+  assert_false(entries[1].isVisible);
+}
+
+function step2() {
+  assert_equals(entries.length, 3);
+  assert_true(entries[2].isVisible);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/position-absolute-overflow-visible-and-not-visible.html b/testing/web-platform/tests/intersection-observer/v2/position-absolute-overflow-visible-and-not-visible.html
new file mode 100644
index 0000000000..c74d4c2021
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/position-absolute-overflow-visible-and-not-visible.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+    height: 200px;
+    width: 100%;
+  }
+  #parent {
+    position: relative;
+    height: 200px;
+    width: 200px;
+    background-color: rgb(250, 221, 221);
+    overflow-y: clip;
+    overflow-x: visible;
+  }
+  #child {
+    background-color: rgb(208, 250, 208);
+    position: absolute;
+    left: 100%;
+    width: 200px;
+    height: 200px;
+  }
+</style>
+</head>
+<body>
+<div id="parent">
+  <div id="child"></div>
+</div>
+</body>
+<script>
+const test = async_test("ParentWithOverflowVisibleAndNotVisible");
+const child = document.getElementById("child");
+const observer = new IntersectionObserver((entries) => {
+  test.step(() => {
+    assert_true(entries[0].isIntersecting);
+    assert_equals(entries[0].intersectionRatio, 1.0);
+    assert_equals(entries[0].intersectionRect.height, 200);
+    assert_equals(entries[0].intersectionRect.width, 200);
+  });
+  test.done();
+});
+observer.observe(child);
+</script>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/intersection-observer/v2/position-relative.html b/testing/web-platform/tests/intersection-observer/v2/position-relative.html
new file mode 100644
index 0000000000..4cdc429570
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/position-relative.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.relpos {
+  position: relative;
+}
+</style>
+
+<div id="target" class="relpos">
+  <div class="relpos">
+    <img border="0" width="100" height="100" src=""/>
+  </div>
+</div>
+
+<script>
+var delay = 100;
+var entries = [];
+var target;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "target exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.", delay);
+}, "IntersectionObserverV2 observing a position:relative div containing a position:relative child");
+
+function step0() {
+  assert_equals(entries.length, 1, "First notification.");
+  assert_true(entries[0].isVisible, "Target is visible.");
+}
+</script>
+
diff --git a/testing/web-platform/tests/intersection-observer/v2/scaled-target.html b/testing/web-platform/tests/intersection-observer/v2/scaled-target.html
new file mode 100644
index 0000000000..f48f0792d0
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/scaled-target.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#iframe {
+  width: 100px;
+  height: 100px;
+  border: 0;
+  margin-bottom: 10px;
+}
+#occluder {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  position: relative;
+}
+</style>
+
+<iframe id="iframe" src="../resources/scaled-target-subframe.html"></iframe>
+<div id="occluder"></div>
+
+<script>
+async_test(function(t) {
+  let iframe = document.getElementById("iframe");
+
+  function step0(event) {
+    assert_equals(event.data, "");
+  }
+
+  function step1(event) {
+    iframe.style.transform = "scale(2)";
+    assert_equals(JSON.stringify(event.data),
+                  JSON.stringify([true]));
+  }
+
+  function step2(event) {
+    assert_equals(JSON.stringify(event.data),
+                  JSON.stringify([false]));
+  }
+
+  let steps = [step0, step1, step2];
+
+  window.addEventListener("message", event => {
+    if (steps.length) {
+      t.step(steps.shift(), t, event);
+      waitForFrame(t, () => {
+        iframe.contentWindow.postMessage("", "*")
+      });
+    } else {
+      t.done();
+    }
+  });
+
+}, "IntersectionObserver V2 test with scale applied to target.");
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/simple-effects.html b/testing/web-platform/tests/intersection-observer/v2/simple-effects.html
new file mode 100644
index 0000000000..baf32203c7
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/simple-effects.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+#effects {
+  opacity: 1;
+  filter: none;
+}
+</style>
+
+<div id="effects">
+  <div id="target"></div>
+</div>
+
+<script>
+var delay = 100;
+var entries = [];
+var target;
+var effects;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  effects = document.getElementById("effects");
+  assert_true(!!target, "target exists");
+  assert_true(!!effects, "effects exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.", delay);
+}, "IntersectionObserverV2 in a single document using the implicit root, with a non-zero opacity ancestor.", delay);
+
+function step0() {
+  effects.style.opacity = "0.99";
+  runTestCycle(step1, "effects.style.opacity = 0.99", delay);
+  checkLastEntry(entries, 0, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, true]);
+}
+
+function step1() {
+  effects.style.opacity = "1";
+  runTestCycle(step2, "effects.style.opacity = 1", delay);
+  checkLastEntry(entries, 1, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, false]);
+}
+
+function step2() {
+  effects.style.filter = "grayscale(50%)";
+  runTestCycle(step3, "effects.style.filter = grayscale(50%)", delay);
+  checkLastEntry(entries, 2, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, true]);
+}
+
+function step3() {
+  checkLastEntry(entries, 3, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, false]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/simple-occlusion-svg-foreign-object.html b/testing/web-platform/tests/intersection-observer/v2/simple-occlusion-svg-foreign-object.html
new file mode 100644
index 0000000000..588ec2abd6
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/simple-occlusion-svg-foreign-object.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+#occluder {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+}
+</style>
+
+<div id="target"></div>
+<svg id="svg" style="display: block">
+  <foreignObject>
+    <div id="occluder"></div>
+  </foreignObject>
+</svg>
+
+<script>
+var delay = 100;
+var entries = [];
+var target;
+var occluder;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  occluder = document.getElementById("occluder");
+  assert_true(!!target, "target exists");
+  assert_true(!!occluder, "occluder exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.", delay);
+}, "IntersectionObserverV2 in a single document using the implicit root, with an occluding element.", delay);
+
+function step0() {
+  svg.style.marginTop = "-10px";
+  runTestCycle(step1, "svg.style.marginTop = '-10px'", delay);
+  checkLastEntry(entries, 0, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, true]);
+}
+
+function step1() {
+  // Occluding elements with opacity=0 should not affect target visibility.
+  svg.style.opacity = "0";
+  runTestCycle(step2, "occluder.style.opacity = 0", delay);
+  checkLastEntry(entries, 1, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, false]);
+}
+
+function step2() {
+  checkLastEntry(entries, 2, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/simple-occlusion.html b/testing/web-platform/tests/intersection-observer/v2/simple-occlusion.html
new file mode 100644
index 0000000000..f3ce518b34
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/simple-occlusion.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+#occluder {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+}
+</style>
+
+<div id="target"></div>
+<div id="occluder"></div>
+
+<script>
+var delay = 100;
+var entries = [];
+var target;
+var occluder;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  occluder = document.getElementById("occluder");
+  assert_true(!!target, "target exists");
+  assert_true(!!occluder, "occluder exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.", delay);
+}, "IntersectionObserverV2 in a single document using the implicit root, with an occluding element.", delay);
+
+function step0() {
+  occluder.style.marginTop = "-10px";
+  runTestCycle(step1, "occluder.style.marginTop = '-10px'", delay);
+  checkLastEntry(entries, 0, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, true]);
+}
+
+function step1() {
+  // Occluding elements with opacity=0 should not affect target visibility.
+  occluder.style.opacity = "0";
+  runTestCycle(step2, "occluder.style.opacity = 0", delay);
+  checkLastEntry(entries, 1, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, false]);
+}
+
+function step2() {
+  checkLastEntry(entries, 2, [0, 100, 0, 100, 0, 100, 0, 100, 0, 800, 0, 600, true, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/text-editor-occlusion.html b/testing/web-platform/tests/intersection-observer/v2/text-editor-occlusion.html
new file mode 100644
index 0000000000..2edb7bbbe6
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/text-editor-occlusion.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.testdiv {
+  font-size: 24px;
+}
+</style>
+
+<div class="testdiv">Target: <input id="target" type="text"></input></div>
+<div class="testdiv" id="occluder">This is the occluder.</div>
+
+<script>
+var delay = 100;
+var entries = [];
+var target;
+var occluder;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  occluder = document.getElementById("occluder");
+  assert_true(!!target, "target exists");
+  assert_true(!!occluder, "occluder exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.", delay);
+}, "IntersectionObserverV2 in a single document using the implicit root, with an occluding element.", delay);
+
+function step0() {
+  occluder.style.marginTop = "-10px";
+  runTestCycle(step1, "occluder.style.marginTop = '-10px'", delay);
+  assert_equals(entries.length, 1);
+  assert_true(entries[0].isVisible);
+}
+
+function step1() {
+  // Occluding elements with opacity=0 should not affect target visibility.
+  occluder.style.opacity = "0";
+  runTestCycle(step2, "occluder.style.opacity = 0", delay);
+  assert_equals(entries.length, 2);
+  assert_false(entries[1].isVisible);
+}
+
+function step2() {
+  assert_equals(entries.length, 3);
+  assert_true(entries[2].isVisible);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/v2/text-shadow.html b/testing/web-platform/tests/intersection-observer/v2/text-shadow.html
new file mode 100644
index 0000000000..cdfc1a2d2a
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/v2/text-shadow.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body, html {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+iframe {
+  width: 100px;
+  height: 100px;
+  border: 0;
+}
+#text-shadow {
+  display: inline-block;
+  font-size: 144px;
+  font-weight: 1000;
+  color: rgba(0, 0, 0, 0);
+  text-shadow: -100px 0 0 rgba(255, 0, 0, .7);
+}
+</style>
+
+<iframe id=target srcdoc="<!DOCTYPE html><div>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</div>"></iframe><div id=text-shadow>O</div>
+
+<script>
+var delay = 100;
+var entries = [];
+var target;
+var occluder;
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  occluder = document.getElementById("text-shadow");
+  assert_true(!!target, "target exists");
+  assert_true(!!occluder, "occluder exists");
+  let observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  }, {trackVisibility: true, delay: delay});
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.", delay);
+}, "IntersectionObserverV2 observing an iframe element.", delay);
+
+function step0() {
+  occluder.style.textShadow = "none";
+  runTestCycle(step1, 'occluder.style.textShadow = "none"', delay);
+  assert_equals(entries.length, 1, "Initial notification.");
+  assert_equals(entries[0].isVisible, false, "Initially occluded.");
+}
+
+function step1() {
+  occluder.style.textShadow = "";
+  runTestCycle(step2, 'occluder.style.textShadow = ""', delay);
+  assert_equals(entries.length, 2, "Notification after removing text shadow.");
+  assert_equals(entries[1].isVisible, true, "Visible when text shadow removed.");
+}
+
+function step2() {
+  assert_equals(entries.length, 3, "Notification after re-adding text shadow.");
+  assert_equals(entries[2].isVisible, false, "Occluded when text shadow re-added.");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/visibility-hidden.html b/testing/web-platform/tests/intersection-observer/visibility-hidden.html
new file mode 100644
index 0000000000..588a42e6ab
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/visibility-hidden.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+body {
+  margin: 0;
+}
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+.spacer {
+  height: calc(100vh + 100px);
+}
+#target {
+  width: 100px;
+  height: 100px;
+  visibility: hidden;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="target"></div>
+<div class="spacer"></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+var entries = [];
+
+runTestCycle(function() {
+  target = document.getElementById("target");
+  assert_true(!!target, "target exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.");
+}, "IntersectionObserver observing a visibility:hidden element.");
+
+function step0() {
+  document.scrollingElement.scrollTop = 300;
+  runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
+  // The numbers in brackets are target client rect; intersection rect;
+  // and root bounds.
+  checkLastEntry(entries, 0, [0, 100, vh + 100, vh + 200, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+}
+
+function step1() {
+  document.scrollingElement.scrollTop = 0;
+  checkLastEntry(entries, 1, [0, 100, vh - 200, vh - 100, 0, 100, vh - 200, vh - 100, 0, vw, 0, vh, true]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/zero-area-element-hidden.html b/testing/web-platform/tests/intersection-observer/zero-area-element-hidden.html
new file mode 100644
index 0000000000..be57ac6983
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/zero-area-element-hidden.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#target {
+  width: 0px;
+  height: 0px;
+  position: fixed;
+  top: -1000px;
+}
+</style>
+
+<div id='target'></div>
+
+<script>
+var vw = document.documentElement.clientWidth;
+var vh = document.documentElement.clientHeight;
+
+var entries = [];
+
+runTestCycle(function() {
+  var target = document.getElementById('target');
+  assert_true(!!target, "target exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF.");
+}, "A zero-area hidden target should not be intersecting.");
+
+function step0() {
+  checkLastEntry(entries, 0, [8, 8, -1000, -1000, 0, 0, 0, 0, 0, vw, 0, vh, false]);
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/zero-area-element-visible.html b/testing/web-platform/tests/intersection-observer/zero-area-element-visible.html
new file mode 100644
index 0000000000..b012b65c18
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/zero-area-element-visible.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<style>
+pre, #log {
+  position: absolute;
+  top: 0;
+  left: 200px;
+}
+#target {
+  width: 0px;
+  height: 0px;
+}
+#container {
+  overflow: clip;
+}
+</style>
+
+<div id="container">
+  <div id='target'></div>
+</div>
+
+<script>
+var entries = [];
+
+runTestCycle(function() {
+  var target = document.getElementById('target');
+  assert_true(!!target, "target exists");
+  var observer = new IntersectionObserver(function(changes) {
+    entries = entries.concat(changes)
+  });
+  observer.observe(target);
+  entries = entries.concat(observer.takeRecords());
+  assert_equals(entries.length, 0, "No initial notifications.");
+  runTestCycle(step0, "First rAF should generate a notification.");
+}, "Ensure that a zero-area target intersecting root generates a notification with intersectionRatio == 1");
+
+function step0() {
+  assert_equals(entries.length, 1, "One notification.");
+  assert_equals(entries[0].intersectionRatio, 1, "intersectionRatio == 1");
+}
+</script>
diff --git a/testing/web-platform/tests/intersection-observer/zoom-scaled-target.html b/testing/web-platform/tests/intersection-observer/zoom-scaled-target.html
new file mode 100644
index 0000000000..6ad7559849
--- /dev/null
+++ b/testing/web-platform/tests/intersection-observer/zoom-scaled-target.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<title>IntersectionObserver observing elements with css zoom</title>
+<link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org">
+<link rel="author" title="Google" href="http://www.google.com/">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/intersection-observer-test-utils.js"></script>
+  <head>
+    <style>
+      div {
+        width: 64px;
+        height: 64px;
+        background-color: blue
+      }
+      div.a {
+        zoom: 1.0;
+        width: 512px;
+        height: 512px;
+      }
+
+      div.b {
+        zoom: 4.0;
+        background-color: pink;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="a" id="ToBeRemoved">
+      <div class="b" id="target"></div>
+    </div>
+    <script>
+      const viewportWidth = document.documentElement.clientWidth;
+      const viewportHeight = document.documentElement.clientHeight;
+      setup(() => {
+        window.entries = [];
+        window.target = document.getElementById("target");
+        window.targetRect = target.getBoundingClientRect();
+      });
+      runTestCycle(function() {
+        assert_true(!!target, "target exists");
+        const observer = new IntersectionObserver(function(changes) {
+          entries = entries.concat(changes);
+        });
+        observer.observe(target);
+        entries = entries.concat(observer.takeRecords());
+        assert_equals(entries.length, 0, "No initial notifications");
+        runTestCycle(validateIntersectionRect, "Validate intersection rect");
+      });
+      function validateIntersectionRect() {
+        // The numbers in brackets are target client rect; intersection rect;
+        // and root bounds.
+        checkLastEntry(entries, 0, [
+          // the 8 pixels comes from the html body padding.
+          8, 8 + 256, 8, 8 + 256,
+          8, 8 + 256, 8, 8 + 256,
+          0, viewportWidth, 0, viewportHeight,
+          true,
+        ]);
+      }
+    </script>
+  </body>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
commit	26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree	f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/intersection-observer
parent	Initial commit. (diff)
download	firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip