element-stops-grouping-after-animation.html (1564B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: view transition element remains grouping during animation</title> 4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <link rel="match" href="element-stops-grouping-after-animation-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 9 <style> 10 .parent { 11 top: 0; 12 width: 100px; 13 height: 100px; 14 position: absolute; 15 background: blue; 16 transform-style: preserve-3d; 17 } 18 .named { 19 view-transition-name: target; 20 } 21 22 .child { 23 background: green; 24 width: 100px; 25 height: 100px; 26 top: 0; 27 left: 0; 28 position: absolute; 29 transform: translateZ(-500px); 30 } 31 32 body { 33 perspective: 1000px; 34 height: 500px; 35 } 36 37 ::view-transition-group(root) { 38 animation-duration: 50ms; 39 opacity: 0; 40 } 41 ::view-transition-group(target) { 42 animation-duration: 0s; 43 } 44 ::view-transition-new(target) { 45 animation: unset; 46 opacity: 1; 47 } 48 ::view-transition-old(target) { 49 animation: unset; 50 opacity: 0; 51 } 52 53 ::view-transition { 54 background: pink; 55 } 56 </style> 57 58 <div id=target class="parent named"><div class=child></div></div> 59 60 <script> 61 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 62 63 function runTest() { 64 let transition = document.startViewTransition(); 65 transition.ready.then(() => { 66 requestAnimationFrame(() => { 67 target.classList.remove("named"); 68 }); 69 }); 70 transition.finished.then(takeScreenshot); 71 } 72 73 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 74 </script>