diff --git a/css/css-view-transitions/scoped/crashtests/zindex-part.html b/css/css-view-transitions/scoped/crashtests/zindex-part.html
new file mode 100644
index 00000000000000..694a6c9f6ca112
--- /dev/null
+++ b/css/css-view-transitions/scoped/crashtests/zindex-part.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<head>
+<style>
+
+#scope {
+  position: relative; width: 100px; height: 100px;
+  background: #ddd; contain: strict;
+}
+#part {
+  position: absolute; top: 10px; left: 10px;
+  width: 80px; height: 80px; background: #8cf;
+  z-index: 1; view-transition-name: foo;
+}
+
+</style>
+</head>
+<body>
+<div id=scope><div id=part></div></div>
+<script>
+
+onload = async () => {
+  t = scope.startViewTransition(() => {});
+  await t.finished;
+  document.documentElement.classList.remove('test-wait');
+};
+
+</script>
+</body>
+</html>
diff --git a/css/css-view-transitions/scoped/paint-order-ref.html b/css/css-view-transitions/scoped/paint-order-ref.html
new file mode 100644
index 00000000000000..6d049f7aa2e249
--- /dev/null
+++ b/css/css-view-transitions/scoped/paint-order-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<style>
+  #scope {
+    position: relative; width: 200px; height: 100px;
+    background: white; contain: strict;
+  }
+  #nonpart1 {
+    position: absolute; top: 40px; left: 20px;
+    width: 50px; height: 50px; background: #a4f;
+  }
+  #nonpart2 {
+    position: absolute; top: 20px; left: 30px;
+    width: 50px; height: 50px; background: #f88;
+  }
+  #vt {
+    position: relative; width: 200px; height: 100px;
+    top: -100px; background: rgba(0, 0, 0, 0.1);
+    will-change: transform;
+  }
+  #part {
+    position: absolute; top: 30px; left: 50px;
+    width: 50px; height: 50px; background: #8cf;
+  }
+
+</style>
+<div id=scope>
+  <div id=nonpart1></div>
+  <div id=nonpart2></div>
+</div>
+<div id=vt>
+  <div id=part></div>
+</div>
diff --git a/css/css-view-transitions/scoped/paint-order.html b/css/css-view-transitions/scoped/paint-order.html
new file mode 100644
index 00000000000000..243758b7eb2bc5
--- /dev/null
+++ b/css/css-view-transitions/scoped/paint-order.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<head>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="paint-order-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<style>
+
+#scope {
+  position: relative; width: 200px; height: 100px;
+  background: white; contain: strict;
+  view-transition-name: none;
+}
+#part {
+  position: absolute; top: 10px; left: 10px;
+  width: 50px; height: 50px; background: #8cf;
+  z-index: 1; view-transition-name: foo;
+}
+#higher-nonpart {
+  position: absolute; top: 20px; left: 30px;
+  z-index: 2; width: 50px; height: 50px; background: #f88;
+}
+#lower-nonpart {
+  position: absolute; top: 40px; left: 20px;
+  z-index: -1; width: 50px; height: 50px; background: #a4f;
+}
+::view-transition { background: rgba(0, 0, 0, 0.1); }
+::view-transition-group(*) { animation-play-state: paused; }
+::view-transition-new(*) {
+  animation: unset; opacity: 1;
+  transform: translateX(40px) translateY(20px);
+}
+::view-transition-old(*) { animation: unset; opacity: 0; }
+
+</style>
+</head>
+<body>
+<div id=scope>
+  <div id=part></div>
+  <div id=higher-nonpart></div>
+  <div id=lower-nonpart></div>
+</div>
+<script>
+
+const scope = document.querySelector("#scope");
+failIfNot(scope.startViewTransition, "Missing element.startViewTransition");
+
+async function runTest() {
+  await waitForCompositorReady();
+  scope.startViewTransition(() => requestAnimationFrame(takeScreenshot));
+}
+onload = () => runTest();
+
+</script>
+</body>
+</html>
