diff --git a/css/css-view-transitions/shadow-part-with-name-nested.html b/css/css-view-transitions/shadow-part-with-name-nested.html
new file mode 100644
index 00000000000000..e34903a4a2218a
--- /dev/null
+++ b/css/css-view-transitions/shadow-part-with-name-nested.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: nested shadow parts should work with view-transition-name</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="match" href="names-are-tree-scoped-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+
+::part(party) {
+  view-transition-name: party;
+}
+
+:root { view-transition-name: none; }
+html::view-transition-group(*) { animation-play-state: paused; }
+html::view-transition-old(*) { animation: unset; opacity: 0 }
+html::view-transition-new(*) { animation: unset; opacity: 0 }
+html::view-transition-group(party) {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <nested-component exportparts="party">
+      <style>
+        div {
+          width: 100px;
+          height: 100px;
+        }
+      </style>
+      <div part="party"></div>
+    </nested-component>
+  </template>
+</custom-component>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</body>
\ No newline at end of file
diff --git a/css/css-view-transitions/shadow-part-with-name-overridden-by-important.html b/css/css-view-transitions/shadow-part-with-name-overridden-by-important.html
new file mode 100644
index 00000000000000..139fbd01b76cf4
--- /dev/null
+++ b/css/css-view-transitions/shadow-part-with-name-overridden-by-important.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shadow parts should give precedence to !important</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="match" href="names-are-tree-scoped-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: green;
+  position: absolute;
+}
+
+::part(party) {
+  view-transition-name: animate-me;
+}
+
+html {
+  view-transition-name: none;
+}
+
+html::view-transition-group(*) { animation-play-state: paused; }
+html::view-transition-old(*) { animation: unset; opacity: 0 }
+html::view-transition-new(*) { animation: unset; opacity: 0 }
+html::view-transition-group(animate-me) {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+</style>
+
+<div></div>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <style>
+      div {
+        width: 100px;
+        height: 100px;
+        position: absolute;
+        view-transition-name: please-dont-animate-me !important;
+      }
+    </style>
+    <div part="party"></div>
+  </template>
+</custom-component>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</body>
diff --git a/css/css-view-transitions/shadow-part-with-name.html b/css/css-view-transitions/shadow-part-with-name.html
new file mode 100644
index 00000000000000..192fbca20c9924
--- /dev/null
+++ b/css/css-view-transitions/shadow-part-with-name.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shadow parts </title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="match" href="names-are-tree-scoped-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+
+::part(party) {
+  view-transition-name: party;
+}
+
+:root { view-transition-name: none; }
+html::view-transition-group(*) { animation-play-state: paused; }
+html::view-transition-old(*) { animation: unset; opacity: 0 }
+html::view-transition-new(*) { animation: unset; opacity: 0 }
+html::view-transition-group(party) {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <style>
+      div {
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+    <div part="party"></div>
+  </template>
+</custom-component>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</body>
