content-with-clip-root-ref.html (633B)
1 <!DOCTYPE html> 2 <title>View transitions: element with clip (ref)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 4 <link rel="author" href="mailto:vmpstr@chromium.org"> 5 <style> 6 .container { 7 width: 100vw; 8 height: 100vh; 9 position: fixed; 10 top: -50vh; 11 left: 0px; 12 overflow: auto; 13 } 14 .target { 15 contain: paint; 16 width: 100px; 17 height: 100vh; 18 display: inline-block; 19 } 20 21 .embedded { 22 width: 100%; 23 height: 50%; 24 } 25 26 body { 27 margin: 0px; 28 height: 150vh; 29 } 30 </style> 31 <div id="container"> 32 <div id="target1" class="target"> 33 <div class="embedded" style="background: green;"></div> 34 </div> 35 </div>