From 275ef3fc45da0f82108b0c6013ed5040f88699b7 Mon Sep 17 00:00:00 2001
From: Khushal Sagar <khushalsagar@chromium.org>
Date: Wed, 22 Mar 2023 18:07:24 -0700
Subject: [PATCH] view-transitions: Clip snapshots to max texture
 size/viewport.

If an element's painting exceeds viewport bounds, clip it down to max
texture size or twice the viewport bounds by painting the subset which
is closest to the snapshot root.

This involves the following 2 changes:

1) A new ClipNode is introduced to paint the desired subrect when
rendering this element in paint, raster and compositing. All these
stages should render only this subset.

2) The object-view-box on the replaced element is still set to the
ink overflow rect. So at paint time, we adjust the replaced content
rect to the actual subset that will be painted based on the clipping
above.

R=pdr@chromium.org, vmpstr@chromium.org, bokan@chromium.org
Bug:1409713
Change-Id: If81bc67ad6ffe49d68e4470a6717b704edafcd3f
---
 ...op-of-viewport-partially-onscreen-new.html | 76 +++++++++++++++
 ...op-of-viewport-partially-onscreen-old.html | 76 +++++++++++++++
 ...op-of-viewport-partially-onscreen-ref.html | 38 ++++++++
 ...-element-below-viewport-offscreen-new.html | 91 ++++++++++++++++++
 ...-element-below-viewport-offscreen-old.html | 91 ++++++++++++++++++
 ...-element-below-viewport-offscreen-ref.html | 46 +++++++++
 ...elow-viewport-partially-onscreen-new.html} | 28 +++---
 ...below-viewport-partially-onscreen-old.html | 74 ++++++++++++++
 ...below-viewport-partially-onscreen-ref.html | 46 +++++++++
 ...lement-left-of-viewport-offscreen-new.html | 96 +++++++++++++++++++
 ...lement-left-of-viewport-offscreen-old.html | 96 +++++++++++++++++++
 ...lement-left-of-viewport-offscreen-ref.html | 47 +++++++++
 ...ft-of-viewport-partially-onscreen-new.html | 80 ++++++++++++++++
 ...ft-of-viewport-partially-onscreen-old.html | 80 ++++++++++++++++
 ...ft-of-viewport-partially-onscreen-ref.html | 53 ++++++++++
 ...ment-on-top-of-viewport-offscreen-new.html | 92 ++++++++++++++++++
 ...ment-on-top-of-viewport-offscreen-old.html | 92 ++++++++++++++++++
 ...ment-on-top-of-viewport-offscreen-ref.html | 43 +++++++++
 ...op-of-viewport-partially-onscreen-new.html | 76 +++++++++++++++
 ...op-of-viewport-partially-onscreen-old.html | 76 +++++++++++++++
 ...p-of-viewport-partially-onscreen-ref.html} | 22 ++---
 ...ft-of-viewport-partially-onscreen-new.html | 80 ++++++++++++++++
 ...ft-of-viewport-partially-onscreen-old.html | 80 ++++++++++++++++
 ...ft-of-viewport-partially-onscreen-ref.html | 42 ++++++++
 ...ement-right-of-viewport-offscreen-new.html | 95 ++++++++++++++++++
 ...ement-right-of-viewport-offscreen-old.html | 95 ++++++++++++++++++
 ...ement-right-of-viewport-offscreen-ref.html | 50 ++++++++++
 ...ht-of-viewport-partially-onscreen-new.html | 78 +++++++++++++++
 ...ht-of-viewport-partially-onscreen-old.html | 78 +++++++++++++++
 ...ht-of-viewport-partially-onscreen-ref.html | 50 ++++++++++
 30 files changed, 2041 insertions(+), 26 deletions(-)
 create mode 100644 css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html
 create mode 100644 css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html
 create mode 100644 css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html
 create mode 100644 css/css-view-transitions/massive-element-below-viewport-offscreen-new.html
 create mode 100644 css/css-view-transitions/massive-element-below-viewport-offscreen-old.html
 create mode 100644 css/css-view-transitions/massive-element-below-viewport-offscreen-ref.html
 rename css/css-view-transitions/{content-with-clip-max-texture-size.html => massive-element-below-viewport-partially-onscreen-new.html} (74%)
 create mode 100644 css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html
 create mode 100644 css/css-view-transitions/massive-element-below-viewport-partially-onscreen-ref.html
 create mode 100644 css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html
 create mode 100644 css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html
 create mode 100644 css/css-view-transitions/massive-element-left-of-viewport-offscreen-ref.html
 create mode 100644 css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html
 create mode 100644 css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html
 create mode 100644 css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-ref.html
 create mode 100644 css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html
 create mode 100644 css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html
 create mode 100644 css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-ref.html
 create mode 100644 css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html
 create mode 100644 css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html
 rename css/css-view-transitions/{content-with-clip-max-texture-size-ref.html => massive-element-on-top-of-viewport-partially-onscreen-ref.html} (70%)
 create mode 100644 css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html
 create mode 100644 css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html
 create mode 100644 css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-ref.html
 create mode 100644 css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html
 create mode 100644 css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html
 create mode 100644 css/css-view-transitions/massive-element-right-of-viewport-offscreen-ref.html
 create mode 100644 css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html
 create mode 100644 css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html
 create mode 100644 css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-ref.html

diff --git a/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html b/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html
new file mode 100644
index 000000000000000..9a00a62b7ae7c40
--- /dev/null
+++ b/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  position: fixed;
+  inset-block-start: -90px;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html b/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html
new file mode 100644
index 000000000000000..ed16ac5662343af
--- /dev/null
+++ b/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  position: fixed;
+  inset-block-start: -90px;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html b/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html
new file mode 100644
index 000000000000000..507f9b8c0a14bc6
--- /dev/null
+++ b/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<title>View transitions: massive element below viewport partially onscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target {
+  position: fixed;
+  inset-block-start: -90px;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+</style>
+<body>
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+</body>
diff --git a/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html b/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html
new file mode 100644
index 000000000000000..b5c0d4e9aee3eca
--- /dev/null
+++ b/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport and completely offscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target_after_bottom_edge {
+  position: fixed;
+  inset-block-start: 20000px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  position: fixed;
+  inset-block-start: 10000px;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's top edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target target_after_bottom_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html b/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html
new file mode 100644
index 000000000000000..6eeb85af3e3d412
--- /dev/null
+++ b/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport and completely offscreen (old content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target_after_bottom_edge {
+  position: fixed;
+  inset-block-start: 20000px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  position: fixed;
+  inset-block-start: 10000px;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's top edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target target_after_bottom_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-below-viewport-offscreen-ref.html b/css/css-view-transitions/massive-element-below-viewport-offscreen-ref.html
new file mode 100644
index 000000000000000..05827eb196bef8f
--- /dev/null
+++ b/css/css-view-transitions/massive-element-below-viewport-offscreen-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: massive element below viewport and completely offscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+.target_after_bottom_edge {
+  position: fixed;
+  inset-block-start: 0px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+</style>
+
+<div class="target target_after_bottom_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+
diff --git a/css/css-view-transitions/content-with-clip-max-texture-size.html b/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html
similarity index 74%
rename from css/css-view-transitions/content-with-clip-max-texture-size.html
rename to css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html
index efd2a6922fe2b64..54232ead6fe335f 100644
--- a/css/css-view-transitions/content-with-clip-max-texture-size.html
+++ b/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html
@@ -1,41 +1,41 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
-<title>View transitions: element with clip max texture size</title>
+<title>View transitions: massive element below viewport partially onscreen (new content)</title>
 <link rel="help" href="https://github.com/WICG/view-transitions">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
-<link rel="match" href="content-with-clip-max-texture-size-ref.html">
+<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">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
 .target {
-  contain: paint;
-  width: 100px;
-  height: 40000px;
+  inline-size: 100px;
+  block-size: 40000px;
   view-transition-name: target;
 }
 
 .top {
-  width: 100%;
-  height: 100px;
+  inline-size: 100%;
+  block-size: 100px;
   background: lightblue;
 }
 
 .middle {
-  width: 100%;
-  height: 39800px;
+  inline-size: 100%;
+  block-size: 39800px;
   background: green;
 }
 
 .bottom {
-  width: 100%;
-  height: 100px;
+  inline-size: 100%;
+  block-size: 100px;
   background: blue;
 }
 
 .hidden {
   contain: paint;
-  width: 10px;
-  height: 10px;
+  inline-size: 10px;
+  block-size: 10px;
   background: grey;
   view-transition-name: hidden;
 }
@@ -63,8 +63,6 @@
 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
 
 async function runTest() {
-  scrollblue.scrollIntoView();
-
   document.startViewTransition(() => {
     requestAnimationFrame(() => requestAnimationFrame(() =>
       requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
diff --git a/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html b/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html
new file mode 100644
index 000000000000000..772720def1116c6
--- /dev/null
+++ b/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-ref.html b/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-ref.html
new file mode 100644
index 000000000000000..001c135f0a68ca6
--- /dev/null
+++ b/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>View transitions: massive element below viewport partially onscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  visibility: hidden;
+}
+</style>
+<body>
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+</body>
diff --git a/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html b/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html
new file mode 100644
index 000000000000000..d9d03d1e91998da
--- /dev/null
+++ b/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport and completely offscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target_before_block_start_edge {
+  position: fixed;
+  inset-block-start: -40100px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's bottom edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  top: unset;
+  left: unset;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target target_before_block_start_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html b/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html
new file mode 100644
index 000000000000000..7861e5c3b8cc74f
--- /dev/null
+++ b/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport and completely offscreen (old content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target_before_block_start_edge {
+  position: fixed;
+  inset-block-start: -40100px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's bottom edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  top: unset;
+  left: unset;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target target_before_block_start_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-left-of-viewport-offscreen-ref.html b/css/css-view-transitions/massive-element-left-of-viewport-offscreen-ref.html
new file mode 100644
index 000000000000000..32e688bbdb6047e
--- /dev/null
+++ b/css/css-view-transitions/massive-element-left-of-viewport-offscreen-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>View transitions: massive element on top of viewport and completely offscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target_at_bottom_edge {
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+</style>
+<body>
+<div class="target target_at_bottom_edge">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+</body>
diff --git a/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html b/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html
new file mode 100644
index 000000000000000..7c14cef2d0026ab
--- /dev/null
+++ b/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  scrollblue.scrollIntoView();
+
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html b/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html
new file mode 100644
index 000000000000000..b586f96de9faa91
--- /dev/null
+++ b/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport partially onscreen (old content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  scrollblue.scrollIntoView();
+
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-ref.html b/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-ref.html
new file mode 100644
index 000000000000000..8fa30505353ab09
--- /dev/null
+++ b/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<title>View transitions: massive element on top of viewport partially onscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  visibility: hidden;
+}
+</style>
+<body>
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+</body>
+<script>
+  scrollblue.scrollIntoView();
+</script>
diff --git a/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html b/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html
new file mode 100644
index 000000000000000..f4a9f833df43d52
--- /dev/null
+++ b/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport and completely offscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target_before_block_start_edge {
+  position: fixed;
+  inset-block-start: -40100px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's bottom edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  top: unset;
+  right: unset;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target target_before_block_start_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html b/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html
new file mode 100644
index 000000000000000..a2eb0447bd09695
--- /dev/null
+++ b/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport and completely offscreen (old content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target_before_block_start_edge {
+  position: fixed;
+  inset-block-start: -40100px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's bottom edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  top: unset;
+  right: unset;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target target_before_block_start_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-ref.html b/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-ref.html
new file mode 100644
index 000000000000000..e8359077386bbc9
--- /dev/null
+++ b/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>View transitions: massive element on top of viewport and completely offscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target_at_bottom_edge {
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+</style>
+<body>
+<div class="target target_at_bottom_edge">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+</body>
diff --git a/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html b/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html
new file mode 100644
index 000000000000000..764a311fc9699c8
--- /dev/null
+++ b/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  scrollblue.scrollIntoView();
+
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html b/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html
new file mode 100644
index 000000000000000..cecefd8f587030b
--- /dev/null
+++ b/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport partially onscreen (old content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  scrollblue.scrollIntoView();
+
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/content-with-clip-max-texture-size-ref.html b/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-ref.html
similarity index 70%
rename from css/css-view-transitions/content-with-clip-max-texture-size-ref.html
rename to css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-ref.html
index 55c95da77216774..9c60e8bf1de309b 100644
--- a/css/css-view-transitions/content-with-clip-max-texture-size-ref.html
+++ b/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-ref.html
@@ -1,37 +1,37 @@
 <!DOCTYPE html>
-<title>View transitions: element with clip max texture size (ref)</title>
+<title>View transitions: massive element on top of viewport partially onscreen (ref)</title>
 <link rel="help" href="https://github.com/WICG/view-transitions">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <style>
 .target {
   contain: paint;
-  width: 100px;
-  height: 40000px;
+  inline-size: 100px;
+  block-size: 40000px;
   view-transition-name: target;
 }
 
 .top {
-  width: 100%;
-  height: 100px;
+  inline-size: 100%;
+  block-size: 100px;
   background: lightblue;
 }
 
 .middle {
-  width: 100%;
-  height: 39800px;
+  inline-size: 100%;
+  block-size: 39800px;
   background: green;
 }
 
 .bottom {
-  width: 100%;
-  height: 100px;
+  inline-size: 100%;
+  block-size: 100px;
   background: blue;
 }
 
 .hidden {
   contain: paint;
-  width: 10px;
-  height: 10px;
+  inline-size: 10px;
+  block-size: 10px;
   background: grey;
   visibility: hidden;
 }
diff --git a/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html b/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html
new file mode 100644
index 000000000000000..b1bae1c09b67d9a
--- /dev/null
+++ b/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  position: fixed;
+  inset-block-start: -90px;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html b/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html
new file mode 100644
index 000000000000000..c878ce881ec5ad5
--- /dev/null
+++ b/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  position: fixed;
+  inset-block-start: -90px;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-ref.html b/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-ref.html
new file mode 100644
index 000000000000000..3516741da0803b7
--- /dev/null
+++ b/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>View transitions: massive element below viewport partially onscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  position: fixed;
+  inset-block-start: -90px;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+</style>
+<body>
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+</body>
diff --git a/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html b/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html
new file mode 100644
index 000000000000000..91b133f2cf30f80
--- /dev/null
+++ b/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport and completely offscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target_after_bottom_edge {
+  position: fixed;
+  inset-block-start: 20000px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  position: fixed;
+  inset-block-start: 10000px;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's top edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target target_after_bottom_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html b/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html
new file mode 100644
index 000000000000000..164ff05f931e9e4
--- /dev/null
+++ b/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport and completely offscreen (old content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target_after_bottom_edge {
+  position: fixed;
+  inset-block-start: 20000px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  position: fixed;
+  inset-block-start: 10000px;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's top edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target target_after_bottom_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-right-of-viewport-offscreen-ref.html b/css/css-view-transitions/massive-element-right-of-viewport-offscreen-ref.html
new file mode 100644
index 000000000000000..f29d3ac6090c8f6
--- /dev/null
+++ b/css/css-view-transitions/massive-element-right-of-viewport-offscreen-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: massive element below viewport and completely offscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target_after_bottom_edge {
+  position: fixed;
+  inset-block-start: 0px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+</style>
+
+<div class="target target_after_bottom_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+
diff --git a/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html b/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html
new file mode 100644
index 000000000000000..b63ed0722525a26
--- /dev/null
+++ b/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html b/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html
new file mode 100644
index 000000000000000..cf090e0ab4c19e1
--- /dev/null
+++ b/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<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">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-ref.html b/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-ref.html
new file mode 100644
index 000000000000000..1df26bb375248b0
--- /dev/null
+++ b/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>View transitions: massive element below viewport partially onscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  visibility: hidden;
+}
+</style>
+<body>
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+</body>