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