Merging upstream version 127.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

99 files changed, 976 insertions, 92 deletions

diff --git a/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html b/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html
index 983ba1d861..4b1411f25d 100644
--- a/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html
+++ b/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="3d-transform-incoming-ref.html">
-<meta name=fuzzy content="3d-transform-incoming-ref.html:0-255;0-515">
+<meta name=fuzzy content="maxDifference=0-255; totalPixels=0-515">
 <script src="/common/reftest-wait.js"></script>
 <style>
 div { box-sizing: border-box; will-change: transform }
diff --git a/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html b/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html
index 398fa97ca9..2fe4887bb1 100644
--- a/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html
+++ b/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="3d-transform-outgoing-ref.html">
-<meta name=fuzzy content="3d-transform-outgoing-ref.html:0-255;0-1200">
+<meta name=fuzzy content="maxDifference=0-255; totalPixels=0-1200">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html b/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html
index b3f8f42cfd..15d1653bfc 100644
--- a/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html
+++ b/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="block-with-overflowing-text-ref.html">
-<meta name="fuzzy" content="block-with-overflowing-text-ref.html:maxDifference=0-2;totalPixels=0-1200">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-1200">
 
 
 <script src="/common/reftest-wait.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child.html b/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child.html
index 7b2a83c776..87d56d33af 100644
--- a/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child.html
+++ b/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="break-inside-avoid-child-ref.html">
-<meta name="fuzzy" content="break-inside-avoid-child-ref.html:0-5;0-1600">
+<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-1600">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child.html
index 8588968d8a..7f8085cae2 100644
--- a/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child.html
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="capture-with-offscreen-child-ref.html">
-<meta name="fuzzy" content="capture-with-offscreen-child-ref.html:0-5;0-200">
+<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-200">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-opacity-zero-child.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-opacity-zero-child.html
index 888d0d1720..2b0563ea31 100644
--- a/testing/web-platform/tests/css/css-view-transitions/capture-with-opacity-zero-child.html
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-opacity-zero-child.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="capture-with-visibility-hidden-child-ref.html">
-<meta name="fuzzy" content="capture-with-visibility-hidden-child-ref.html:0-5;0-300">
+<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-300">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html
index 462d267b94..3a4811ada1 100644
--- a/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="capture-with-visibility-mixed-descendants-ref.html">
-<meta name=fuzzy content="capture-with-visibility-mixed-descendants-ref.html:0-5;0-500">
+<meta name=fuzzy content="maxDifference=0-5; totalPixels=0-500">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element.html b/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element.html
index 4cde9cb586..4a26c50ef8 100644
--- a/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element.html
+++ b/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="clip-path-larger-than-border-box-on-child-of-named-element-ref.html">
-<meta name="fuzzy" content="clip-path-larger-than-border-box-on-child-of-named-element-ref.html:maxDifference=0-255;totalPixels=0-400">
+<meta name="fuzzy" content="maxDifference=0-255;totalPixels=0-400">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .target {
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html
index f86f64843c..a6c444917a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="content-with-transform-ref.html">
-<meta name="fuzzy" content="content-with-transform-ref.html:0-1;0-500">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-500">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html
index 3755910a1b..c6fda7f988 100644
--- a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="content-with-transform-ref.html">
-<meta name="fuzzy" content="content-with-transform-ref.html:0-1;0-400">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-400">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html
index 2ba73758e2..c8d92ed33f 100644
--- a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html
+++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="css-tags-paint-order-with-entry-ref.html">
-<meta name="fuzzy" content="css-tags-paint-order-with-entry-ref.html:0-120;0-300">
+<meta name="fuzzy" content="maxDifference=0-120; totalPixels=0-300">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html
index f5959bf434..05bc98dca9 100644
--- a/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html
+++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html
@@ -5,7 +5,7 @@
   <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
   <link rel="author" href="mailto:bokan@chromium.org">
   <link rel="match" href="dialog-in-rtl-iframe-ref.html">
-  <meta name=fuzzy content="dialog-in-rtl-iframe-ref.html:0-80;0-500">
+  <meta name=fuzzy content="maxDifference=0-80; totalPixels=0-500">
   <script src="/common/reftest-wait.js"></script>
   <style>
     iframe {
diff --git a/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html b/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html
index a57c1d5108..d77c817345 100644
--- a/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html
+++ b/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html
@@ -2,7 +2,6 @@
 <title>View transitions: event pseudo name</title>
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
-<link rel="match" href="web-animations-api-ref.html">
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html b/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html
index 97ad9dfb44..9ac1621639 100644
--- a/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html
+++ b/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="far-away-capture-ref.html">
-<meta name="fuzzy" content="far-away-capture-ref.html:0-1;0-5">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-5">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .flex {
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-new.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-new.html
index e50e6654a7..14371aca3f 100644
--- a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-new.html
@@ -6,7 +6,7 @@
 <link rel="match" href="fractional-box-with-overflow-children-ref.html">
 <!-- subpixel differences are ok in this test (in highdpi), but channel difference
      should not be perceptible -->
-<meta name=fuzzy content="fractional-box-with-overflow-children-ref.html:0-3;0-100">
+<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-old.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-old.html
index acf72e20df..0d19bf9c29 100644
--- a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-old.html
@@ -6,7 +6,7 @@
 <link rel="match" href="fractional-box-with-overflow-children-ref.html">
 <!-- subpixel differences are ok in this test (in highdpi), but channel difference
      should not be perceptible -->
-<meta name=fuzzy content="fractional-box-with-overflow-children-ref.html:0-3;0-100">
+<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-new-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-new-iframe-ref.html
new file mode 100644
index 0000000000..86bc2a4a36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-new-iframe-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: iframe and main frame transition at the same time (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+body {
+  background: lightgreen;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+body {
+  background: lightblue;
+}
+</style>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-new-iframe.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-new-iframe.html
new file mode 100644
index 0000000000..89360c0dcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-new-iframe.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe and main frame transition at the same time</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="iframe-and-main-frame-transition-new-main-new-iframe-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+/* Keep showing the live state for the main frame so we can assert the state of
+   screenshots in the iframe */
+::view-transition-group(root) {
+  animation-duration: 300s;
+}
+::view-transition-old(root) {
+  animation: unset;
+  opacity: 0;
+}
+::view-transition-new(root) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+  /* The iframe is showing new live DOM */
+  ::view-transition-group(root) {
+    animation-duration: 300s;
+  }
+  ::view-transition-new(root) {
+    animation: unset;
+    opacity: 1;
+  }
+  ::view-transition-old(root) {
+    animation: unset;
+    opacity: 0;
+  }
+</style>
+<body></body>
+"></iframe>
+<script>
+  onload = runTest;
+
+  async function startTransition(document, oldColor, newColor) {
+    document.documentElement.style.background = oldColor;
+    await document.startViewTransition(() => {
+      document.documentElement.style.background = newColor;
+    }).ready;
+  }
+
+  async function runTest() {
+    await startTransition(document, "green", "lightgreen");
+
+    const iframeDocument = document.querySelector("iframe").contentDocument;
+    await startTransition(iframeDocument, "blue", "lightblue");
+
+    takeScreenshot();
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-old-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-old-iframe-ref.html
new file mode 100644
index 0000000000..baafea3656
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-old-iframe-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: iframe and main frame transition at the same time (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+body {
+  background: lightgreen;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+body {
+  background: blue;
+}
+</style>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-old-iframe.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-old-iframe.html
new file mode 100644
index 0000000000..7a9c53ffc1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-old-iframe.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe and main frame transition at the same time</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="iframe-and-main-frame-transition-new-main-old-iframe-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+/* Keep showing the live state for the main frame so we can assert the state of
+   screenshots in the iframe */
+::view-transition-group(root) {
+  animation-duration: 300s;
+}
+::view-transition-old(root) {
+  animation: unset;
+  opacity: 0;
+}
+::view-transition-new(root) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+  /* The iframe is showing old screenshots */
+  ::view-transition-group(root) {
+    animation-duration: 300s;
+  }
+  ::view-transition-old(root) {
+    animation: unset;
+    opacity: 1;
+  }
+  ::view-transition-new(root) {
+    animation: unset;
+    opacity: 0;
+  }
+</style>
+<body></body>
+"></iframe>
+<script>
+  onload = runTest;
+
+  async function startTransition(document, oldColor, newColor) {
+    document.documentElement.style.background = oldColor;
+    await document.startViewTransition(() => {
+      document.documentElement.style.background = newColor;
+    }).ready;
+  }
+
+  async function runTest() {
+    await startTransition(document, "green", "lightgreen");
+
+    const iframeDocument = document.querySelector("iframe").contentDocument;
+    await startTransition(iframeDocument, "blue", "lightblue");
+
+    takeScreenshot();
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-new-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-new-iframe-ref.html
new file mode 100644
index 0000000000..7033cd9d21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-new-iframe-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: iframe and main frame transition at the same time (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+body {
+  background: green;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+body {
+  background: lightblue;
+}
+</style>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-new-iframe.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-new-iframe.html
new file mode 100644
index 0000000000..d3681aa434
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-new-iframe.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe and main frame transition at the same time</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="iframe-and-main-frame-transition-old-main-new-iframe-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+/* Keep showing the screenshot for the main frame */
+::view-transition-group(root) {
+  animation-duration: 300s;
+}
+::view-transition-old(root) {
+  animation: unset;
+  opacity: 1;
+}
+::view-transition-new(root) {
+  animation: unset;
+  opacity: 0;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+  /* The iframe is showing live DOM */
+  ::view-transition-group(root) {
+    animation-duration: 300s;
+  }
+  ::view-transition-new(root) {
+    animation: unset;
+    opacity: 1;
+  }
+  ::view-transition-old(root) {
+    animation: unset;
+    opacity: 0;
+  }
+</style>
+<body></body>
+"></iframe>
+<script>
+  onload = runTest;
+
+  async function startTransition(document, oldColor, newColor) {
+    document.documentElement.style.background = oldColor;
+    await document.startViewTransition(() => {
+      document.documentElement.style.background = newColor;
+    }).ready;
+  }
+
+  async function runTest() {
+    const iframeDocument = document.querySelector("iframe").contentDocument;
+    await startTransition(iframeDocument, "blue", "lightblue");
+
+    await startTransition(document, "green", "lightgreen");
+
+    takeScreenshot();
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-old-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-old-iframe-ref.html
new file mode 100644
index 0000000000..2824884c4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-old-iframe-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: iframe and main frame transition at the same time (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+body {
+  background: green;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+body {
+  background: blue;
+}
+</style>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-old-iframe.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-old-iframe.html
new file mode 100644
index 0000000000..bcdc566a26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-old-iframe.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe and main frame transition at the same time</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="iframe-and-main-frame-transition-old-main-old-iframe-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+/* Keep showing the screenshot for the main frame */
+::view-transition-group(root) {
+  animation-duration: 300s;
+}
+::view-transition-old(root) {
+  animation: unset;
+  opacity: 1;
+}
+::view-transition-new(root) {
+  animation: unset;
+  opacity: 0;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+  /* The iframe is showing an old screenshot */
+  ::view-transition-group(root) {
+    animation-duration: 300s;
+  }
+  ::view-transition-old(root) {
+    animation: unset;
+    opacity: 1;
+  }
+  ::view-transition-new(root) {
+    animation: unset;
+    opacity: 0;
+  }
+</style>
+<body></body>
+"></iframe>
+<script>
+  onload = runTest;
+
+  async function startTransition(document, oldColor, newColor) {
+    document.documentElement.style.background = oldColor;
+    await document.startViewTransition(() => {
+      document.documentElement.style.background = newColor;
+    }).ready;
+  }
+
+  async function runTest() {
+    const iframeDocument = document.querySelector("iframe").contentDocument;
+    await startTransition(iframeDocument, "blue", "lightblue");
+
+    await startTransition(document, "green", "lightgreen");
+
+    takeScreenshot();
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-ref.html
new file mode 100644
index 0000000000..9253bb5f21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: iframe and main frame transition at the same time (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+body {
+  background: green;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+body {
+  background: orange;
+}
+</style>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main.html
new file mode 100644
index 0000000000..bd58368645
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe and main frame transition at the same time</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="iframe-and-main-frame-transition-old-main-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+/* The main frame is showing the old screenshot */
+::view-transition-group(root) {
+  animation-duration: 300s;
+}
+::view-transition-new(root) {
+  animation: unset;
+  opacity: 0;
+}
+::view-transition-old(root) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+  body {
+    background: orange;
+  }
+</style>
+<body></body>"></iframe>
+<script>
+  onload = runTest;
+
+  async function startTransition(document, oldColor, newColor) {
+    document.documentElement.style.background = oldColor;
+    await document.startViewTransition(() => {
+      document.documentElement.style.background = newColor;
+    }).ready;
+  }
+
+  async function runTest() {
+    await startTransition(document, "green", "lightgreen");
+
+    // Start an iframe transition while the main frame transition is showing the
+    // old screenshot. This change shouldn't show up visually because the old
+    // screenshot on the main frame still has the iframe's old content.
+    const iframeDocument = document.querySelector("iframe").contentDocument;
+    await startTransition(iframeDocument, "blue", "lightblue");
+
+    takeScreenshot();
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-with-name-on-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-with-name-on-iframe-ref.html
new file mode 100644
index 0000000000..94bd3bdac3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-with-name-on-iframe-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>View transitions: iframe and main frame transition at the same time with name on iframe (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+  border: 1px solid orange;
+}
+
+body {
+  background: green;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+body {
+  background: blue;
+}
+</style>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-with-name-on-iframe.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-with-name-on-iframe.html
new file mode 100644
index 0000000000..f948e89dc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-with-name-on-iframe.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe and main frame transition at the same time with name on iframe</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="iframe-and-main-frame-transition-with-name-on-iframe-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+  view-transition-name: inner;
+}
+
+.old {
+  border: 1px solid black;
+}
+
+.new {
+  border: 1px solid orange;
+}
+
+/* The main frame is showing the old screenshot for the root */
+::view-transition-group(root) {
+  animation-duration: 300s;
+}
+::view-transition-new(root) {
+  animation: unset;
+  opacity: 0;
+}
+::view-transition-old(root) {
+  animation: unset;
+  opacity: 1;
+}
+
+/* The iframe is showing the live screenshot */
+::view-transition-new(inner) {
+  animation: unset;
+  opacity: 1;
+}
+::view-transition-old(inner) {
+  animation: unset;
+  opacity: 0;
+}
+
+</style>
+
+<iframe id="inner" srcdoc="
+<style>
+  /* The iframe document itself is showing an old screenshot */
+  ::view-transition-group(root) {
+    animation-duration: 300s;
+  }
+  ::view-transition-new(root) {
+    animation: unset;
+    opacity: 0;
+  }
+  ::view-transition-old(root) {
+    animation: unset;
+    opacity: 1;
+  }
+</style>
+<body></body>"></iframe>
+<script>
+  onload = runTest;
+
+  async function startTransition(document, oldColor, newColor, nestedFrame) {
+    document.documentElement.style.background = oldColor;
+    if (nestedFrame != null)
+      nestedFrame.classList.add("old");
+
+    await document.startViewTransition(() => {
+      document.documentElement.style.background = newColor;
+      if (nestedFrame != null) {
+        nestedFrame.classList.remove("old");
+        nestedFrame.classList.add("new");
+      }
+    }).ready;
+  }
+
+  async function runTest() {
+    await startTransition(document, "green", "lightgreen", document.getElementById("inner"));
+
+    const iframeDocument = document.querySelector("iframe").contentDocument;
+    await startTransition(iframeDocument, "blue", "lightblue", null);
+
+    takeScreenshot();
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html b/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html
index 67a57bb885..81072ac38a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html
@@ -5,7 +5,7 @@
   <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
   <link rel="author" href="mailto:bokan@chromium.org">
   <link rel="match" href="iframe-new-has-scrollbar-ref.html">
-  <meta name=fuzzy content="iframe-new-has-scrollbar-ref.html:0-80;0-500">
+  <meta name=fuzzy content="maxDifference=0-80; totalPixels=0-500">
   <script src="/common/reftest-wait.js"></script>
   <style>
     iframe {
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html b/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html
index 96dd75a3df..5d26633398 100644
--- a/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html
@@ -5,7 +5,7 @@
   <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
   <link rel="author" href="mailto:bokan@chromium.org">
   <link rel="match" href="iframe-old-has-scrollbar-ref.html">
-  <meta name=fuzzy content="iframe-old-has-scrollbar-ref.html:0-80;0-500">
+  <meta name=fuzzy content="maxDifference=0-80; totalPixels=0-500">
   <script src="/common/reftest-wait.js"></script>
   <style>
     iframe {
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-transition-destroyed-document-crash.html b/testing/web-platform/tests/css/css-view-transitions/iframe-transition-destroyed-document-crash.html
index 31f6a10ed6..13e743c3a1 100644
--- a/testing/web-platform/tests/css/css-view-transitions/iframe-transition-destroyed-document-crash.html
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-transition-destroyed-document-crash.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
-<html class=reftest-wait>
+<html class=test-wait>
 <title>View transitions: crash test</title>
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
-<script src="/common/reftest-wait.js"></script>
 <html>
 <head>
 <script>
 function eventhandler1() {
-  var var00106 = htmlvar00011.contentDocument;
-  var var00228 = var00106.startViewTransition();
+  var iframeDoc = iframe.contentDocument;
+  var viewTransition = iframeDoc.startViewTransition();
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
-      requestAnimationFrame(takeScreenshot);
+      requestAnimationFrame(() => document.documentElement.classList.remove("test-wait"));
     })
   });
 }
@@ -20,8 +19,7 @@ function eventhandler1() {
 </script>
 </head>
 <body>
-<iframe id="htmlvar00011" onunload="eventhandler3()" border="0" srcdoc="A#:^;&lt;gV&lt;&gt;8" style=":{,J" referrerpolicy="unsafe-url" background="!xp&gt;" nohref="nohref" nonce="nonce" inputEncoding="s" offsetX="0.3538512271910753">:+j&amp;;&amp;-^&gt;.7xf\jZ1,xb</iframe>
-<style id="htmlvar00014" nonce="nonce" media="screen and (min-width:0px)" onerror="eventhandler1()" onload="eventhandler1()" dir="N5!" updateRangeEnd="0" abbr="4IvGMN[Wxd" symbols="=d##y#)DA4V8ya}KO.cv" frameBorder="^b*]&amp;:|#lB:" search="N">ynFXo*</style>
+<iframe id="iframe" onunload="eventhandler3()" border="0" srcdoc="A#:^;&lt;gV&lt;&gt;8" style=":{,J" referrerpolicy="unsafe-url" background="!xp&gt;" nohref="nohref" nonce="nonce" inputEncoding="s" offsetX="0.3538512271910753">:+j&amp;;&amp;-^&gt;.7xf\jZ1,xb</iframe>
+<style nonce="nonce" media="screen and (min-width:0px)" onerror="eventhandler1()" onload="eventhandler1()" dir="N5!" updateRangeEnd="0" abbr="4IvGMN[Wxd" symbols="=d##y#)DA4V8ya}KO.cv" frameBorder="^b*]&amp;:|#lB:" search="N">ynFXo*</style>
 </body>
 </html>
-
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html b/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html
index 8fa361b0fc..5f26a494b2 100644
--- a/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html
@@ -6,7 +6,7 @@
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="iframe-transition-ref.html">
 <meta name="assert" content="Ensure that iframe root capture is sized and displayed correctly">
-<meta name=fuzzy content="iframe-transition-ref.html:0-200;0-200">
+<meta name=fuzzy content="maxDifference=0-200; totalPixels=0-200">
 <script src="/common/reftest-wait.js"></script>
 <style>
 iframe { width: 500px; height: 500px }
diff --git a/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html b/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html
index 8640899814..026ecb240a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html
+++ b/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="inline-with-offset-from-containing-block-ref.html">
-<meta name="fuzzy" content="inline-with-offset-from-containing-block-ref.html:0-255;0-1400">
+<meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-1400">
 
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/rendering-utils.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html
index 23f5fc22cf..65b14a6c4b 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html
index fbc8edadc0..b35222c24a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-700">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html
index 611d4da21a..a122cd4b3b 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-below-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-below-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-950">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-950">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html
index bda3ebf1b1..567819fadf 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-below-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-below-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-445">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-445">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html
index e881e19622..42f97555f5 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-below-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-below-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html
index c8c3c53082..87b9a20795 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-below-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-below-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-445">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-1600">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html
index c8471032a4..97a3cb41ff 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-left-of-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-left-of-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html
index 04ab58f3aa..a41a738826 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-left-of-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-left-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html
index 15cc94ffe7..accd909158 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-left-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html
index 0d2aeec59d..e16806e8f3 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-left-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html
index 6ef8edd3b0..24edbc1ec7 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-on-top-of-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-on-top-of-viewport-offscreen-ref.html:maxDifference=0-6;totalPixels=0-920">
+<meta name="fuzzy" content="maxDifference=0-6;totalPixels=0-920">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html
index 5e303e8286..8dfc8eefe1 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-on-top-of-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-on-top-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html
index a9e5f5842a..c301e47099 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-on-top-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html
index 41dc622914..1f810af745 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-on-top-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html
index 719701fe88..426751d093 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html
index e8eeec3f26..ea10e2471b 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-700">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html
index 89d00a53a8..53749f29b2 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-right-of-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-right-of-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-445">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-445">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html
index 04247af18e..b5337c4491 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-right-of-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-right-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-445">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-445">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html
index a7b599e5eb..ac3fe48a0a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-right-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-right-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html
index 2498f2e1f1..2626910d78 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-right-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-right-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-445">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-445">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations.html b/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations.html
index e166b3c9df..8fff184b2a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations.html
+++ b/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="multiline-span-with-overflowing-text-and-box-decorations-ref.html">
-<meta name="fuzzy" content="multiline-span-with-overflowing-text-and-box-decorations-ref.html:maxDifference=0-3;totalPixels=0-4900">
+<meta name="fuzzy" content="maxDifference=0-3; totalPixels=0-4900">
 
 
 <script src="/common/reftest-wait.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html b/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html
index 094d6963bf..70b6515fb5 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="new-and-old-sizes-match-ref.html">
-<meta name="fuzzy" content="new-and-old-sizes-match-ref.html:0-1;0-300">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-300">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-ancestor-clipped-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-ancestor-clipped-ref.html
new file mode 100644
index 0000000000..caa99f2807
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-ancestor-clipped-ref.html
@@ -0,0 +1,34 @@
+<!doctype HTML>
+<html>
+<head>
+<style>
+html {
+  background: lightpink;
+}
+div {
+  position: relative;
+  width: 200px;
+  height: 200px;
+}
+
+.outer {
+  background-color: blue;
+  box-shadow: -50px -50px 0px 0px rgba(0,0,0,1);
+  left: 100px;
+  top: 100px;
+}
+
+.inner {
+  background-color: red;
+  left: 50px;
+  top: 50px;
+}
+
+</style>
+</head>
+<body>
+</body>
+<div class="outer">
+  <div class="inner"></div>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-ancestor-clipped.html b/testing/web-platform/tests/css/css-view-transitions/new-content-ancestor-clipped.html
new file mode 100644
index 0000000000..69a8de5f52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-ancestor-clipped.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture opacity elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:mattwoodrow@apple.com">
+<link rel="match" href="new-content-ancestor-clipped-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.outer {
+  background-color: blue;
+  overflow: hidden;
+  box-shadow: -50px -50px 0px 0px rgba(0,0,0,1);
+  position: relative;
+  left: 100px;
+  top: 100px;
+  width: 200px;
+  height: 200px;
+  view-transition-name: outer;
+}
+.inner {
+  background-color: red;
+  position: relative;
+  left: 50px;
+  top: 50px;
+  width: 200px;
+  height: 200px;
+  view-transition-name: inner;
+}
+/* We're verifying what we capture, so just display the new contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div class="outer">
+  <div class="inner"></div>
+</div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html
index 702bb09bc3..19af2493d0 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="new-content-captures-clip-path-ref.html">
-<meta name="fuzzy" content="new-content-captures-clip-path-ref.html:0-1;0-500">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-500">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html
index 740199675d..18f323c320 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="new-content-captures-different-size-ref.html">
-<meta name=fuzzy content="new-content-captures-different-size-ref.html:0-40;0-30000">
+<meta name=fuzzy content="maxDifference=0-40; totalPixels=0-30000">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html
index 94bef1d6dd..5f4807404c 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html
@@ -4,6 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="new-content-captures-spans-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-400">
 <script src="/common/reftest-wait.js"></script>
 <style>
 span {
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-left-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-left-ref.html
new file mode 100644
index 0000000000..e86e5197da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-left-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>View transitions: capture elements and then change overflow (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<style>
+body { background: pink }
+#target {
+  position: relative;
+  background: green;
+  left: 10px;
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+}
+#target.toggle {
+  outline: 300px solid transparent;
+}
+</style>
+
+<div id=target class=toggle></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-left.html b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-left.html
new file mode 100644
index 0000000000..e362dce76a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-left.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html class=reftest-wait>
+<title>View transitions: capture elements and then change overflow</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="author" href="mailto:mattwoodrow@apple.com">
+<link rel="match" href="new-content-changes-overflow-left-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  position: relative;
+  background: green;
+  left: 10px;
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+}
+#target.toggle {
+  outline: 300px solid transparent;
+}
+
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: pink; }
+</style>
+
+<div id=target></div>
+<script>
+
+async function runTest() {
+  document.startViewTransition().ready.then(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        target.classList.add("toggle");
+        requestAnimationFrame(takeScreenshot);
+      });
+    });
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html b/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html
index 3246a7e76f..834d0e8f45 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html
@@ -6,7 +6,7 @@
 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="new-content-has-scrollbars-ref.html">
-<meta name=fuzzy content="new-content-has-scrollbars-ref.html:0-40;0-30000">
+<meta name=fuzzy content="maxDifference=0-40; totalPixels=0-30000">
 <script src="/common/reftest-wait.js"></script>
 <style>
   html, body {
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html b/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html
index 46c96acb04..81b261a9bf 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="new-content-is-inline-ref.html">
-<meta name="fuzzy" content="new-content-is-inline-ref.html:0-255;0-1000">
+<meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-1000">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html
index 04a80409c5..a610d68802 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="content-object-fit-fill-ref.html">
-<meta name="fuzzy" content="content-object-fit-fill-ref.html:0-60;0-20">
+<meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-20">
 <script src="/common/reftest-wait.js"></script>
 <style>
 #target {
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html b/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html
index bccb760fb5..376b7fd11f 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="new-content-scaling-ref.html">
-<meta name="fuzzy" content="new-content-scaling-ref.html:maxDifference=0-16;totalPixels=0-400">
+<meta name="fuzzy" content="maxDifference=0-16; totalPixels=0-400">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .shared {
diff --git a/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html b/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html
index 335e48fa70..793dfd46c9 100644
--- a/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html
+++ b/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="object-view-box-ref.html">
-<meta name="fuzzy" content="object-view-box-ref.html:0-1;0-300">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-300">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html
index 7ed5e1ca15..67aa5bf32f 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-captures-clip-path-ref.html">
-<meta name="fuzzy" content="old-content-captures-clip-path-ref.html:0-1;0-500">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-500">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html
index 392247bc95..7f3be742b0 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-captures-different-size-ref.html">
-<meta name=fuzzy content="old-content-captures-different-size-ref.html:0-40;0-30000">
+<meta name=fuzzy content="maxDifference=0-40; totalPixels=0-30000">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html
index cd71c9dfaf..97b8911644 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-captures-opacity-ref.html">
-<meta name=fuzzy content="old-content-captures-opacity-ref.html:0-1;0-50000">
+<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-50000">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html
index 51a22bc136..a1cb332942 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-captures-root-ref.html">
-<meta name="fuzzy" content="old-content-captures-root-ref.html:0-1;0-500">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-500">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html b/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html
index 13e26c702d..b9638ebb10 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html
@@ -6,7 +6,7 @@
 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="old-content-has-scrollbars-ref.html">
-<meta name=fuzzy content="old-content-has-scrollbars-ref.html:0-40;0-30000">
+<meta name=fuzzy content="maxDifference=0-40; totalPixels=0-30000">
 <script src="/common/reftest-wait.js"></script>
 <style>
   html, body {
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html b/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html
index 70ff67c0e0..3333a07a02 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="old-content-is-inline-ref.html">
-<meta name="fuzzy" content="old-content-is-inline-ref.html:0-255;0-500">
+<meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-500">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html
index 0652b30a07..51023fa27b 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="content-object-fit-fill-ref.html">
-<meta name="fuzzy" content="content-object-fit-fill-ref.html:0-60;0-20">
+<meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-20">
 <script src="/common/reftest-wait.js"></script>
 <style>
 #target {
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html
index 5e6969d9cc..827ca027dd 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-object-view-box-clip-path-reference-ref.html">
-<meta name="fuzzy" content="old-content-object-view-box-clip-path-reference-ref.html:0-1;0-100">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-100">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .target {
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html
index f894555154..d0d26b9790 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-object-view-box-clip-path-ref.html">
-<meta name="fuzzy" content="old-content-object-view-box-clip-path-ref.html:0-1;0-30">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-30">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .target {
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-element-overflow-hidden-ref.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-overflow-hidden-ref.html
new file mode 100644
index 0000000000..02bcb5bb49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-overflow-hidden-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html style="background:pink">
+<title>View transitions: overflow:hidden is respected on pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<style>
+body {
+  margin: 0px;
+}
+div {
+  width: 200px;
+  height: 200px;
+}
+#target {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background: green;
+  overflow: hidden;
+}
+#inner {
+  position: relative;
+  left: 100px;
+  top: 100px;
+  background: blue;
+}
+.offset {
+  left: 400px;
+}
+</style>
+
+<div id="target"><div id="inner"></div></div>
+<div id="target" class="offset"><div id="inner"></div></div>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-element-overflow-hidden.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-overflow-hidden.html
new file mode 100644
index 0000000000..e40df4f6a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-overflow-hidden.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: overflow:hidden is respected on pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:mattwoodrow@apple.com">
+<link rel="match" href="pseudo-element-overflow-hidden-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+body {
+  margin: 0px;
+}
+div {
+  width: 200px;
+  height: 200px;
+}
+#target {
+  width: 200px;
+  height: 200px;
+  background: green;
+  view-transition-name: target;
+}
+#inner {
+  position: relative;
+  left: 100px;
+  top: 100px;
+  background: blue;
+}
+
+/* We're verifying what we capture, so just display both of the captures for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: pink; }
+
+html::view-transition-new(target) {
+  overflow:hidden;
+}
+html::view-transition-old(target) {
+  left: 400px;
+  overflow: hidden;
+}
+</style>
+
+<div id="target"><div id="inner"></div></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition();
+  t.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-element-preserve-3d-ref.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-preserve-3d-ref.html
new file mode 100644
index 0000000000..1eefed24b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-preserve-3d-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: transform-style: preserve-3d is respected on pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+
+<style>
+body {
+  background: pink;
+}
+div {
+  width: 200px;
+  height: 200px;
+  background: green;
+}
+
+</style>
+
+<div id="target"></div>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-element-preserve-3d.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-preserve-3d.html
new file mode 100644
index 0000000000..474f743e1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-preserve-3d.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: transform-style: preserve-3d is respected on pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:mattwoodrow@apple.com">
+<link rel="match" href="pseudo-element-preserve-3d-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+div {
+  width: 200px;
+  height: 200px;
+  background: green;
+  view-transition-name: target;
+}
+
+/* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-group(target) { background: green; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: pink; }
+html::view-transition-image-pair(target) {
+  transform: rotateX(90deg);
+  transform-style: preserve-3d;
+}
+html::view-transition-old(target) {
+  transform: rotateX(90deg);
+}
+</style>
+
+<div id="target"></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition();
+  t.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html
index e1f1718618..4d492c40d8 100644
--- a/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="pseudo-rendering-invalidation-ref.html">
-<meta name="fuzzy" content="pseudo-rendering-invalidation-ref.html:0-20;0-300">
+<meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-300">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildard.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildcard.html
index 13490d5878..13490d5878 100644
--- a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildard.html
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildcard.html
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html b/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html
index a4d6f11ad4..1d4d1610d1 100644
--- a/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html
+++ b/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-captures-root-ref.html">
-<meta name="fuzzy" content="old-content-captures-root-ref.html:0-1;0-500">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-500">
 <script src="/common/reftest-wait.js"></script>
 <style>
 :root { view-transition-name: another-root; }
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html b/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html
index b9c384d94a..d67bb256fd 100644
--- a/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html
+++ b/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html
@@ -1,10 +1,9 @@
 <!DOCTYPE html>
-<html class=reftest-wait>
+<html class=test-wait>
 <title>View transitions: entry animation from root display none</title>
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 
-<script src="/common/reftest-wait.js"></script>
 <style>
 .hidden {
   display: none;
@@ -15,16 +14,14 @@
 </style>
 
 <script>
-failIfNot(document.startViewTransition, "Missing document.startViewTransition");
-
 async function runTest() {
   transition = document.startViewTransition();
-  transition.ready.then(
+  transition.ready.then(() => {
     requestAnimationFrame(() => {
       document.documentElement.classList.toggle("hidden");
-    }));
-  transition.finished.then(takeScreenshot);
+    });
+  });
+  transition.finished.then(() => document.documentElement.classList.remove("test-wait"));
 }
 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
 </script>
-
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html
index 2fa0132727..3c3429412b 100644
--- a/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html
+++ b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html
@@ -4,6 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="root-scrollbar-with-fixed-background-ref.html">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-4500">
 
 <script src="/common/rendering-utils.js"></script>
 <script src="/common/reftest-wait.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html
index df0ec1a9d8..6044ba2636 100644
--- a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html
+++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html
@@ -10,4 +10,4 @@ body {
   padding: 0;
   margin: 0;
 }
-
+</style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge.html b/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge.html
index c7179b7a01..f61b916caa 100644
--- a/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge.html
+++ b/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="rotated-cat-off-top-edge-ref.html">
-<meta name="fuzzy" content="rotated-cat-off-top-edge-ref.html:0-5;0-1500">
+<meta name="fuzzy" content="maxDifference=0-70; totalPixels=0-22000">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html b/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html
index 3b94ffa7bb..d04f87215e 100644
--- a/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html
+++ b/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="scroller-child-abspos-ref.html">
-<meta name="fuzzy" content="scroller-child-abspos-ref.html:0-5;0-800">
+<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-800">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scroller-child.html b/testing/web-platform/tests/css/css-view-transitions/scroller-child.html
index 5cb2f03e70..7d4368fe57 100644
--- a/testing/web-platform/tests/css/css-view-transitions/scroller-child.html
+++ b/testing/web-platform/tests/css/css-view-transitions/scroller-child.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="scroller-child-ref.html">
-<meta name="fuzzy" content="scroller-child-ref.html:0-5;0-800">
+<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-800">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scroller.html b/testing/web-platform/tests/css/css-view-transitions/scroller.html
index e61d13b316..9d82046891 100644
--- a/testing/web-platform/tests/css/css-view-transitions/scroller.html
+++ b/testing/web-platform/tests/css/css-view-transitions/scroller.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="scroller-ref.html">
-<meta name="fuzzy" content="scroller-ref.html:0-5;0-10">
+<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-10">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/set-current-time.html b/testing/web-platform/tests/css/css-view-transitions/set-current-time.html
index f7e802d79b..efe561c6ea 100644
--- a/testing/web-platform/tests/css/css-view-transitions/set-current-time.html
+++ b/testing/web-platform/tests/css/css-view-transitions/set-current-time.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="set-current-time-ref.html">
-<meta name="fuzzy" content="set-current-time-ref.html:0-2;0-40000">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-40000">
 <script src="/common/reftest-wait.js"></script>
 <style>
 :root { view-transition-name: unset; }
diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html
index 4a619f29cc..91b71f7eec 100644
--- a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html
+++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="snapshot-containing-block-absolute-ref.html">
-<meta name="fuzzy" content="snapshot-containing-block-absolute-ref.html:0-20;0-100">
+<meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-100">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html
index 8e47a056bd..40feea46ef 100644
--- a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html
+++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="snapshot-containing-block-includes-scrollbar-gutter-ref.html">
-<meta name="fuzzy" content="snapshot-containing-block-includes-scrollbar-gutter-ref.html:0-20;0-100">
+<meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-100">
 <script src="/common/reftest-wait.js"></script>
 <style>
   :root {
diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html
index fc0c7033c9..44fe4cfc5e 100644
--- a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html
+++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="snapshot-containing-block-static-ref.html">
-<meta name="fuzzy" content="snapshot-containing-block-static-ref.html:0-20;0-100">
+<meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-100">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html
index a2bf59ecb0..262970ad5f 100644
--- a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html
+++ b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html
@@ -4,8 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="span-with-overflowing-text-and-box-decorations-ref.html">
-<meta name="fuzzy" content="span-with-overflowing-text-and-box-decorations-ref.html:maxDifference=0-3;totalPixels=0-4900">
-
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-4900">
 
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/rendering-utils.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text.html b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text.html
index f3f0f534e9..5a6268ddf0 100644
--- a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text.html
+++ b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text.html
@@ -4,8 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="span-with-overflowing-text-ref.html">
-<meta name="fuzzy" content="span-with-overflowing-text-ref.html:maxDifference=0-3;totalPixels=0-1100">
-
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-1100">
 
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/rendering-utils.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html b/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html
index 7cd621fbfd..101f7c2a63 100644
--- a/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html
+++ b/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html
@@ -5,7 +5,7 @@
   <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
   <link rel="author" href="mailto:bokan@chromium.org">
   <link rel="match" href="transition-in-empty-iframe-ref.html">
-  <meta name=fuzzy content="transition-in-empty-iframe-ref.html:0-80;0-1000">
+  <meta name=fuzzy content="maxDifference=0-80; totalPixels=0-1000">
   <script src="/common/reftest-wait.js"></script>
   <style>
     iframe {
diff --git a/testing/web-platform/tests/css/css-view-transitions/web-animations-api-parse-pseudo-argument.html b/testing/web-platform/tests/css/css-view-transitions/web-animations-api-parse-pseudo-argument.html
index 40c9a0d0c2..dfaac62c17 100644
--- a/testing/web-platform/tests/css/css-view-transitions/web-animations-api-parse-pseudo-argument.html
+++ b/testing/web-platform/tests/css/css-view-transitions/web-animations-api-parse-pseudo-argument.html
@@ -3,7 +3,7 @@
 <title>View transitions with web-animation API: full parsing of argument</title>
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="match" href="web-animations-api-ref.html">
-<meta name="fuzzy" content="web-animations-api-ref.html:0-2;0-500">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-500">
 <meta name="variant" content="?first-pseudo=::view-transition-group( first)">
 <meta name="variant" content="?first-pseudo=::view-transition-group(first)">
 <meta name="variant" content="?first-pseudo=::view-transition-group( first">
diff --git a/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html b/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html
index c739e416c8..23b1504b24 100644
--- a/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html
+++ b/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="web-animations-api-ref.html">
-<meta name="fuzzy" content="web-animations-api-ref.html:0-2;0-500">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-500">
 
 <script src="/common/reftest-wait.js"></script>
 <style>