rotated-container.html (1537B)
1 <!doctype html> 2 <html class=reftest-wait> 3 <title>Nested View Transitions: rotated container</title> 4 <link rel="author" href="mailto:vmpstr@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 6 <link rel="match" href="rotated-container-ref.html"> 7 <!-- Accommodate anti-aliasing along border --> 8 <meta name=fuzzy content="maxDifference=0-80; totalPixels=0-2000"> 9 <script src="/common/reftest-wait.js"></script> 10 11 <style> 12 :root { view-transition-name: none } 13 ::view-transition { background: pink } 14 ::view-transition-group(*) { 15 animation-duration: 1s; 16 animation-play-state: paused; 17 } 18 ::view-transition-old(*) { 19 animation: unset; 20 opacity: 0; 21 } 22 ::view-transition-new(*) { 23 animation: unset; 24 opacity: 1; 25 } 26 27 #target { 28 width: 100px; 29 height: 100px; 30 position: absolute; 31 left: 50px; 32 top: 50px; 33 background: lightblue; 34 35 view-transition-name: container; 36 view-transition-group: contain; 37 } 38 .after { 39 transform: translateX(100px) rotate(45deg); 40 } 41 #item { 42 view-transition-name: item; 43 width: 50px; 44 height: 50px; 45 background: blue; 46 } 47 </style> 48 49 <div id=target> 50 <div id=item></div> 51 </div> 52 53 <script> 54 async function runTest() { 55 const transition = document.startViewTransition(() => target.classList.toggle("after")); 56 await transition.ready; 57 document.documentElement.getAnimations({ subtree: true }).forEach((a) =>{ 58 a.currentTime = 1000; 59 }); 60 requestAnimationFrame(takeScreenshot); 61 } 62 63 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 64 </script> 65 </html>