new-content-transform-change-001.html (1523B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: dynamic transform change of new content after start</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 6 <link rel="author" title="Mozilla" href="https://mozilla.org"> 7 <link rel="match" href="new-content-transform-change-001-ref.html"> 8 <meta name=fuzzy content="maxDifference=0-75;totalPixels=0-10100"> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 :root { 12 view-transition-name: none; 13 } 14 15 #target { 16 view-transition-name: target; 17 width: 100px; 18 height: 100px; 19 background-color: green; 20 transform: translate(0); 21 } 22 23 :root::view-transition { 24 background-color: pink; 25 } 26 27 /* Just something that doesn't animate transform, so that the transform change takes effect immediately */ 28 @keyframes opacity-anim { 29 from { opacity: 1 } 30 to { opacity: 1 } 31 } 32 33 :root::view-transition-group(*) { 34 animation-name: opacity-anim; 35 animation-play-state: paused; 36 } 37 </style> 38 <div id="target"></div> 39 <script> 40 function twoRafs() { 41 return new Promise(r => { 42 requestAnimationFrame(() => requestAnimationFrame(r)); 43 }); 44 } 45 async function runTest() { 46 await document.startViewTransition().ready; 47 await twoRafs(); 48 document.getElementById("target").style.transform = "rotate(45deg)"; 49 await twoRafs(); 50 takeScreenshot(); 51 } 52 onload = () => twoRafs().then(runTest); 53 </script>