rotated-cat-off-top-edge.html (1155B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View transitions: rotated img element with border radius off the top edge</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <link rel="match" href="rotated-cat-off-top-edge-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-70; totalPixels=0-22000"> 8 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 .target { 12 transform: rotate(330deg) translate3d(110px, 10px, 10px); 13 border-radius: 0.375rem; 14 width: 400px; 15 height: 400px; 16 } 17 ::view-transition-group(root) { 18 animation-duration: 500s; 19 animation-play-state: paused; 20 } 21 22 ::view-transition-old(*) { 23 animation: unset; 24 opacity: 1; 25 } 26 27 ::view-transition-new(*) { 28 animation: unset; 29 opacity: 0; 30 } 31 32 </style> 33 <body> 34 <img class="target" src="support/cat.png"> 35 <script> 36 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 37 38 function runTest() { 39 let transition = document.startViewTransition(); 40 transition.ready.then(takeScreenshot); 41 } 42 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 43 </script>