1 files changed, 53 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom.html b/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom.html
new file mode 100644
index 0000000000..6f026607bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: Modify style via CSSOM</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+<link rel="match" href="modify-style-via-cssom-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#box {
+  width: 100px;
+  height: 100px;
+  background: limegreen;
+}
+html::view-transition-group(root) {
+  animation-duration: 300s;
+}
+html::view-transition-new(root) {
+  animation: none;
+  opacity: 0;
+}
+html::view-transition-old(root) {
+  animation: none;
+  opacity: 1;
+}
+</style>
+<div id="box"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function rAF() {
+  return new Promise(resolve => requestAnimationFrame(resolve));
+}
+
+async function runTest() {
+  await document.startViewTransition().ready;
+  await rAF();
+  await rAF();
+
+  // Once the animation is running, ensure modifying style via CSSOM is
+  // effective.
+  const cssSheet = new CSSStyleSheet();
+  cssSheet.replaceSync(`::view-transition-old(root) {
+    transform: translateY(100px);
+  }`);
+  document.adoptedStyleSheets = [cssSheet];
+
+  await rAF();
+  takeScreenshot();
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+</html>