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