group-children-sizing-ref.html (798B)
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 17 .item { 18 background: blue; 19 position: relative; 20 top: -25px; 21 left: -10px; 22 23 height: 50px; 24 width: 250px; 25 margin: 1px; 26 border: 1px solid black; 27 } 28 29 .popout { 30 position: absolute; 31 left: -9px; 32 top: 81px; 33 background: blue; 34 35 height: 50px; 36 width: 250px; 37 border: 1px solid black; 38 } 39 40 </style> 41 42 <div id=wrapper> 43 <div id=clipper> 44 <div class=item></div> 45 <div class=item></div> 46 <div class=item></div> 47 <div class=item></div> 48 <div class=item></div> 49 </div> 50 <div class=popout></div> 51 </div>