group-children-sizing.html (1283B)
1 <!doctype html> 2 <html class=reftest-wait> 3 <title>Nested View Transitions: group children sizing</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="group-children-sizing-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 #clipper { 12 view-transition-group: contain; 13 view-transition-name: clipper; 14 15 height: 200px; 16 width: 200px; 17 } 18 19 .item { 20 view-transition-name: match-element; 21 background: blue; 22 position: relative; 23 top: -25px; 24 left: -10px; 25 26 height: 50px; 27 width: 250px; 28 margin: 1px; 29 border: 1px solid black; 30 } 31 32 .item.popout { 33 view-transition-group: root; 34 } 35 36 ::view-transition-group(*), 37 ::view-transition-old(*), 38 ::view-transition-new(*) { 39 animation-play-state: paused; 40 } 41 42 ::view-transition-group-children(clipper) { 43 overflow: clip; 44 } 45 </style> 46 47 <div id=clipper> 48 <div class=item></div> 49 <div class=item></div> 50 <div class="item popout"></div> 51 <div class=item></div> 52 <div class=item></div> 53 </div> 54 55 <script> 56 57 function runTest() { 58 document.startViewTransition().ready.then(takeScreenshot); 59 } 60 61 onload = () => { 62 waitForCompositorReady().then(runTest); 63 } 64 </script>