clip-on-target-in-callback-2.html (1505B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View Transitions: Fade out of clipped content</title> 4 <!-- In this test #target is not participating in the view transition and 5 therefore should have the clipped portion fade out. --> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 7 <link rel="match" href="clip-on-target-in-callback-2-ref.html"> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <!-- Accommodate small color mismatch --> 10 <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-48600"> 11 <script src="/common/reftest-wait.js"></script> 12 <script src="/web-animations/testcommon.js"></script> 13 <style> 14 #container { 15 width: 200px; 16 height: 200px; 17 background: blue; 18 border: 5px solid black; 19 position: relative; 20 } 21 #container.after { 22 overflow: clip; 23 } 24 25 #target { 26 margin-top: 150px; 27 width: 100px; 28 height: 100px; 29 background: green; 30 } 31 32 ::view-transition-group(*), 33 ::view-transition-image-pair(*), 34 ::view-transition-old(*), 35 ::view-transition-new(*) { 36 /* freeze all animations at mid-point */ 37 animation-duration: 100000s; 38 animation-delay: -50000s; 39 animation-timing-function: cubic-bezier(0, 1, 1, 0); 40 } 41 42 </style> 43 44 <div id="container"> 45 <div id="target"></div> 46 </div> 47 48 <script> 49 async function runTest() { 50 const vt = container.startViewTransition(() => { 51 container.classList.add("after"); 52 }); 53 await vt.ready; 54 takeScreenshotOnAnimationsReady(); 55 } 56 57 waitForCompositorReady().then(runTest); 58 </script> 59 </body> 60 </html>