nested-root-capture-with-clip.html (1640B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>Nested View Transitions root capture with border radius</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <link rel="match" href="nested-root-capture-with-clip-ref.html"> 7 <link rel=stylesheet href="resources/pause-view-transitions.css"></link> 8 <meta name=fuzzy content="maxDifference=0-40; totalPixels=0-500"> 9 <script src="/common/reftest-wait.js"></script> 10 <script src="/dom/events/scrolling/scroll_support.js"></script> 11 12 <style> 13 :root { view-transition-name: none } 14 #clipper { 15 view-transition-group: contain; 16 view-transition-name: clipper; 17 overflow: clip; 18 height: 200px; 19 width: 100px; 20 border-radius: 50%; 21 background: rebeccapurple; 22 } 23 24 .item { 25 view-transition-name: match-element; 26 view-transition-class: item; 27 background: pink; 28 margin-bottom: 10px; 29 height: 20px; 30 } 31 #i0 { 32 view-transition-name: none; 33 will-change: transform; 34 } 35 ::view-transition-group(clipper) { 36 animation-play-state: paused; 37 } 38 ::view-transition-new(clipper) { 39 animation: unset; 40 opacity: 0; 41 } 42 ::view-transition-old(clipper) { 43 animation: unset; 44 opacity: 1; 45 } 46 ::view-transition-group(*.item) { 47 display: none; 48 } 49 ::view-transition { 50 background: lightgreen; 51 } 52 </style> 53 54 <div id=clipper> 55 <div id=i0 class=item></div> 56 <div id=i1 class=item></div> 57 <div id=i2 class=item></div> 58 <div id=i3 class=item></div> 59 </div> 60 61 <script> 62 function runTest() { 63 document.startViewTransition().ready.then(takeScreenshot); 64 } 65 66 onload = async () => { 67 await waitForCompositorReady(); 68 runTest(); 69 } 70 </script> 71 </html>