diff --git a/css/css-view-transitions/shadow-part-with-class-inside-shadow-important.html b/css/css-view-transitions/shadow-part-with-class-inside-shadow-important.html
new file mode 100644
index 00000000000000..34d98be1fa4210
--- /dev/null
+++ b/css/css-view-transitions/shadow-part-with-class-inside-shadow-important.html
@@ -0,0 +1,55 @@
+<!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;
+  view-transition-class: red;
+}
+
+: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;
+}
+html::view-transition-group(party.red) {
+  background: red;
+}
+</style>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <style>
+      div {
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+    <div part="party" style="view-transition-class: none !important"></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-class-inside-shadow.html b/css/css-view-transitions/shadow-part-with-class-inside-shadow.html
new file mode 100644
index 00000000000000..ad89ce230b5419
--- /dev/null
+++ b/css/css-view-transitions/shadow-part-with-class-inside-shadow.html
@@ -0,0 +1,54 @@
+<!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;
+}
+html::view-transition-group(party.red) {
+  background: red;
+}
+</style>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <style>
+      div {
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+    <div part="party" style="view-transition-class: red"></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-class.html b/css/css-view-transitions/shadow-part-with-class.html
new file mode 100644
index 00000000000000..090fceeb14bf43
--- /dev/null
+++ b/css/css-view-transitions/shadow-part-with-class.html
@@ -0,0 +1,58 @@
+<!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;
+  view-transition-class: green;
+}
+
+: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: yellow;
+}
+html::view-transition-group(party.red) {
+  background: red;
+}
+html::view-transition-group(party.green) {
+  background: green;
+}
+</style>
+
+<custom-component>
+  <template shadowrootmode="open">
+    <style>
+      div {
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+    <div part="party" style="view-transition-class: red"></div>
+  </template>
+</custom-component>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</body>
