1 files changed, 62 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-view-transitions/fragmented-during-transition-skips.html b/testing/web-platform/tests/css/css-view-transitions/fragmented-during-transition-skips.html
new file mode 100644
index 0000000000..e872aa6124
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fragmented-during-transition-skips.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: fragmented elements skipped</title>
+<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="fragmented-during-transition-skips-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+#spacer {
+  width: 100px;
+  height: 950px;
+  background: lightgreen;
+}
+#container {
+  width: 500px;
+  height: 500px;
+}
+.fragment {
+  columns: 2;
+}
+#target {
+  width: 200px;
+  height: 200px;
+  background: green;
+  view-transition-name: target;
+}
+#unrelated {
+  width: 100px;
+  height: 100px;
+  background: lightblue;
+  view-transition-name: unrelated;
+}
+
+::view-transition {
+  background: pink;
+}
+::view-transition-group(root) {
+  animation-duration: 500s;
+  visibility: hidden;
+}
+::view-transition-group(target) {
+  border: 1px solid black;
+}
+</style>
+<div id=container>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+<div id=unrelated></div>
+
+<script>
+function runTransition() {
+  let t = document.startViewTransition();
+  t.ready.then(() => {
+    requestAnimationFrame(() => container.classList.add("fragment"))
+  });
+  t.finished.then(takeScreenshot);
+}
+
+requestAnimationFrame(() => requestAnimationFrame(runTransition))
+</script>