<!DOCTYPE html> <html class=reftest-wait> <title>View transitions: view transition element remains grouping during animation</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="element-is-grouping-during-animation-ref.html"> <script src="/common/reftest-wait.js"></script> <style> .parent { top: 0; width: 100px; height: 100px; position: absolute; background: red; transform-style: preserve-3d; } .named { view-transition-name: target; } .child { background: green; width: 100px; height: 100px; top: 0; left: 0; position: absolute; transform: translateZ(-500px); } body { perspective: 1000px; height: 500px; } ::view-transition-group(root) { animation-duration: 500s; opacity: 0; } ::view-transition-group(target) { animation-duration: 0s; } ::view-transition-new(target) { animation: unset; opacity: 1; } ::view-transition-old(target) { animation: unset; opacity: 0; } ::view-transition { background: pink; } </style> <div id=target class="parent named"><div class=child></div></div> <script> failIfNot(document.startViewTransition, "Missing document.startViewTransition"); function runTest() { let transition = document.startViewTransition(); transition.ready.then(() => { requestAnimationFrame(() => { target.classList.remove("named"); requestAnimationFrame(takeScreenshot); }); }); } onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); </script>