group-children-sizing-with-border-props-ref.html (945B)
1 <!doctype html> 2 <html> 3 <title>Nested View Transitions: group children sizing (ref)</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 6 <style> 7 #wrapper { 8 position: relative; 9 } 10 11 #clipper { 12 height: 200px; 13 width: 200px; 14 overflow: clip; 15 16 border-width: 5px 10px 15px 20px; 17 border-radius: 0px 60px 50px 70px; 18 corner-shape: squircle; 19 20 border-style: solid; 21 border-color: green; 22 } 23 24 .item { 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 .popout { 37 position: absolute; 38 left: 11px; 39 top: 87px; 40 background: blue; 41 42 height: 50px; 43 width: 250px; 44 border: 1px solid black; 45 } 46 47 </style> 48 49 <div id=wrapper> 50 <div id=clipper> 51 <div class=item></div> 52 <div class=item></div> 53 <div class=item></div> 54 <div class=item></div> 55 <div class=item></div> 56 </div> 57 <div class=popout></div> 58 </div>