display-change-during-transition.html (2483B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 7 <link rel="match" href="display-change-during-transition-ref.html"> 8 <meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-14400"> 9 <style> 10 .tr { 11 view-transition-name: demo; 12 } 13 ::view-transition { 14 pointer-events: none; 15 } 16 ::view-transition-group(demo) { 17 /* freeze animation at midpoint */ 18 animation-duration: 10000s; 19 animation-delay: -5000s; 20 animation-timing-function: cubic-bezier(0, 1, 1, 0); 21 display: block; 22 outline: 5px solid red; 23 } 24 ::view-transition-image-pair(*), 25 ::view-transition-old(*), 26 ::view-transition-new(*) { 27 /* No cross-fade */ 28 animation: unset; 29 } 30 .box { 31 position: absolute; 32 z-index: 0; 33 will-change: transform; 34 contain: strict; 35 } 36 #scope { 37 position: absolute; 38 background: #eee; 39 left: 40px; 40 top: 40px; 41 width: 490px; 42 height: 190px; 43 } 44 .part { 45 left: 30px; 46 top: 30px; 47 width: 120px; 48 height: 120px; 49 background-color: purple; 50 } 51 .part.state2 { 52 transform: translateX(300px); 53 } 54 </style> 55 </head> 56 <script src="/common/reftest-wait.js"></script> 57 <script src="/web-animations/testcommon.js"></script> 58 <body> 59 <div id=scope class=box> 60 <div class="part box tr state1"></div> 61 </div> 62 </body> 63 <script> 64 function animationStartPromise() { 65 return new Promise(resolve => { 66 const listener = event => { 67 document.removeEventListener('animationstart', listener); 68 resolve(); 69 }; 70 document.addEventListener('animationstart', listener); 71 }); 72 } 73 74 window.onload = async () => { 75 const animationStarted = animationStartPromise(); 76 const vt = scope.startViewTransition(() => { 77 scope.querySelector('.part').classList.toggle('state2'); 78 }); 79 await vt.ready; 80 await animationStarted; 81 await waitForNextFrame(); 82 await runAndWaitForFrameUpdate(() => { 83 const new_style = document.createElement('style'); 84 new_style.innerText = 85 "::view-transition-group(demo):not(:only-child) { " + 86 " display: flex;" + 87 " outline: 5px solid green;" + 88 "}"; 89 document.head.appendChild(new_style); 90 }); 91 takeScreenshot(); 92 }; 93 </script> 94 </html>