rounded-border-clipper.html (1357B)
1 <!doctype html> 2 <html class=reftest-wait> 3 <title>Nested View Transitions: Rounded border clipper</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="rounded-border-clipper-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="resources/compute-test.js"></script> 8 <script src="/dom/events/scrolling/scroll_support.js"></script> 9 10 <style> 11 :root { view-transition-name: none } 12 13 #clipper { 14 view-transition-group: contain; 15 view-transition-name: clipper; 16 overflow: clip; 17 height: 200px; 18 width: 100px; 19 border-radius: 20px; 20 } 21 22 .item { 23 will-change: transform; 24 view-transition-name: item; 25 background: green; 26 position: relative; 27 height: 50px; 28 } 29 30 .lower { 31 top: 50px; 32 } 33 34 ::view-transition-group(clipper) { 35 animation-play-state: paused; 36 overflow: clip; 37 border-radius: 20px; 38 } 39 </style> 40 41 <div id=clipper> 42 <div id=item class=item></div> 43 </div> 44 45 <script> 46 47 async function runTest() { 48 await document.startViewTransition(() => item.classList.add("lower")).ready; 49 50 let anims = document.documentElement.getAnimations({ subtree: true }); 51 let promises = anims.map(anim => { 52 if (anim.playState != "paused") { 53 return anim.finished; 54 } 55 }); 56 Promise.all(promises).then(takeScreenshot); 57 } 58 59 onload = () => { 60 waitForCompositorReady().then(runTest); 61 } 62 </script>