clip-on-target-in-callback.html (1493B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View Transitions: Clip on target in callback does not clip root</title> 4 <!-- In this test #target is participating in the view transition and 5 therefore should escape clipping on the scoped element. --> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 7 <link rel="match" href="clip-on-target-in-callback-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 } 20 #container.after { 21 overflow: clip; 22 } 23 24 #target { 25 margin-top: 150px; 26 width: 100px; 27 height: 100px; 28 background: green; 29 view-transition-name: target; 30 } 31 32 ::view-transition-group(*), 33 ::view-transition-image-pair(*), 34 ::view-transition-old(*), 35 ::view-transition-new(*) { 36 /* freeze all animations at start */ 37 animation-duration: 100000s; 38 animation-timing-function: steps(1, jump-end); 39 } 40 </style> 41 42 <div id="container"> 43 <div id="target"></div> 44 </div> 45 46 <script> 47 async function runTest() { 48 const vt = container.startViewTransition(() => { 49 container.classList.add("after"); 50 }); 51 await vt.ready; 52 takeScreenshotOnAnimationsReady(); 53 } 54 55 waitForCompositorReady().then(runTest); 56 </script> 57 </body> 58 </html>