transform-clip.html (1778B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <!-- TODO: update link --> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 7 <link rel="match" href="transform-clip-ref.html"> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <!-- accommodate anti-aliasing at edge of circle --> 10 <meta name="fuzzy" content="maxDifference=0-150; totalPixels=0-600"> 11 <title>Scoped view transform with transform and clip.</title> 12 </head> 13 <script src="/common/reftest-wait.js"></script> 14 <script src="resources/compute-test.js"></script> 15 <script src="/dom/events/scrolling/scroll_support.js"></script> 16 <style> 17 #clipper { 18 view-transition-group: contain; 19 view-transition-name: clipper; 20 overflow: clip; 21 height: 100px; 22 width: 100px; 23 border-radius: 50px; 24 position: absolute; 25 top: 20px; 26 left: 20px; 27 } 28 29 #target { 30 height: 50px; 31 background-color: forestgreen; 32 view-transition-name: target; 33 will-change: transform; 34 } 35 36 ::view-transition-group(clipper) { 37 animation-play-state: paused; 38 background-color: hotpink; 39 overflow: clip; 40 border-radius: 50px; 41 } 42 43 .lower { 44 transform: translateY(25px); 45 } 46 47 </style> 48 <body> 49 <div id=clipper> 50 <div id=target></div> 51 </div> 52 </body> 53 <script> 54 55 async function runTest() { 56 const clipper = document.getElementById('clipper'); 57 const target = document.getElementById('target'); 58 await waitForNextFrame(); 59 const vt = clipper.startViewTransition(() => target.classList.add("lower")); 60 await vt.ready; 61 document.getAnimations().forEach(a => { 62 if (a.playState != 'paused') { 63 a.finish(); 64 } 65 }); 66 requestAnimationFrame(takeScreenshot); 67 } 68 onload = () => { 69 waitForCompositorReady().then(runTest); 70 } 71 </script> 72 </html>