group-children-sizing-with-border-props.html (1525B)
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-props-ref.html"> 6 <meta name=fuzzy content="maxDifference=0-70; totalPixels=0-500"> 7 <script src="/common/reftest-wait.js"></script> 8 <script src="resources/compute-test.js"></script> 9 <script src="/dom/events/scrolling/scroll_support.js"></script> 10 11 <style> 12 #clipper { 13 view-transition-group: contain; 14 view-transition-name: clipper; 15 16 border-width: 5px 10px 15px 20px; 17 border-radius: 0px 60px 50px 70px; 18 corner-shape: squircle; 19 border-style: solid; 20 border-color: green; 21 22 height: 200px; 23 width: 200px; 24 } 25 26 .item { 27 view-transition-name: match-element; 28 background: blue; 29 position: relative; 30 top: -25px; 31 left: -10px; 32 33 height: 50px; 34 width: 250px; 35 margin: 1px; 36 border: 1px solid black; 37 } 38 39 .item.popout { 40 view-transition-group: none; 41 } 42 43 ::view-transition-group(*), 44 ::view-transition-old(*), 45 ::view-transition-new(*) { 46 animation-play-state: paused; 47 } 48 49 ::view-transition-group-children(clipper) { 50 overflow: clip; 51 } 52 </style> 53 54 <div id=clipper> 55 <div class=item></div> 56 <div class=item></div> 57 <div class="item popout"></div> 58 <div class=item></div> 59 <div class=item></div> 60 </div> 61 62 <script> 63 64 function runTest() { 65 document.startViewTransition().ready.then(takeScreenshot); 66 } 67 68 onload = () => { 69 waitForCompositorReady().then(runTest); 70 } 71 </script>