Import Cobalt 21.master.0.253153
diff --git a/src/third_party/web_platform_tests/intersection-observer/v2/animated-occlusion.html b/src/third_party/web_platform_tests/intersection-observer/v2/animated-occlusion.html
new file mode 100644
index 0000000..fa69733
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/blur-filter.html b/src/third_party/web_platform_tests/intersection-observer/v2/blur-filter.html
new file mode 100644
index 0000000..8cf6306
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/box-shadow.html b/src/third_party/web_platform_tests/intersection-observer/v2/box-shadow.html
new file mode 100644
index 0000000..765fa8b
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/cross-origin-effects.sub.html b/src/third_party/web_platform_tests/intersection-observer/v2/cross-origin-effects.sub.html
new file mode 100644
index 0000000..5f328be
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/cross-origin-occlusion.sub.html b/src/third_party/web_platform_tests/intersection-observer/v2/cross-origin-occlusion.sub.html
new file mode 100644
index 0000000..4c2f286
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/delay-test.html b/src/third_party/web_platform_tests/intersection-observer/v2/delay-test.html
new file mode 100644
index 0000000..e3906ea
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/drop-shadow-filter-vertical-rl.html b/src/third_party/web_platform_tests/intersection-observer/v2/drop-shadow-filter-vertical-rl.html
new file mode 100644
index 0000000..fc5b145
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/iframe-target.html b/src/third_party/web_platform_tests/intersection-observer/v2/iframe-target.html
new file mode 100644
index 0000000..53fbff8
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/inline-occlusion.html b/src/third_party/web_platform_tests/intersection-observer/v2/inline-occlusion.html
new file mode 100644
index 0000000..e4b097e
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/position-relative.html b/src/third_party/web_platform_tests/intersection-observer/v2/position-relative.html
new file mode 100644
index 0000000..4cdc429
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/scaled-target.html b/src/third_party/web_platform_tests/intersection-observer/v2/scaled-target.html
new file mode 100644
index 0000000..f48f079
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/simple-effects.html b/src/third_party/web_platform_tests/intersection-observer/v2/simple-effects.html
new file mode 100644
index 0000000..baf3220
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/simple-occlusion-svg-foreign-object.html b/src/third_party/web_platform_tests/intersection-observer/v2/simple-occlusion-svg-foreign-object.html
new file mode 100644
index 0000000..588ec2a
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/simple-occlusion.html b/src/third_party/web_platform_tests/intersection-observer/v2/simple-occlusion.html
new file mode 100644
index 0000000..f3ce518
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/text-editor-occlusion.html b/src/third_party/web_platform_tests/intersection-observer/v2/text-editor-occlusion.html
new file mode 100644
index 0000000..2edb7bb
--- /dev/null
+++ b/src/third_party/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/src/third_party/web_platform_tests/intersection-observer/v2/text-shadow.html b/src/third_party/web_platform_tests/intersection-observer/v2/text-shadow.html
new file mode 100644
index 0000000..cdfc1a2
--- /dev/null
+++ b/src/third_party/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>
