massive-element-left-of-viewport-partially-onscreen-ref.html (1173B)
1 <!DOCTYPE html> 2 <title>View transitions: massive element on top of viewport partially onscreen (ref)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 4 <link rel="author" href="mailto:khushalsagar@chromium.org"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style> 7 :root { 8 writing-mode: vertical-lr; 9 font: 12px/1 Ahem; 10 } 11 12 .target { 13 contain: paint; 14 inline-size: 100px; 15 block-size: 40000px; 16 view-transition-name: target; 17 } 18 19 .top { 20 inline-size: 100%; 21 block-size: 100px; 22 background: lightblue; 23 } 24 25 .middle { 26 inline-size: 100%; 27 block-size: 39800px; 28 background: green; 29 } 30 31 .bottom { 32 inline-size: 100%; 33 block-size: 100px; 34 background: blue; 35 } 36 37 .hidden { 38 contain: paint; 39 inline-size: 10px; 40 block-size: 10px; 41 background: grey; 42 visibility: hidden; 43 } 44 </style> 45 <body> 46 <div class="target"> 47 <div class="top">This text is at the top of the box</div> 48 <div class="middle">This text is in the middle of the box</div> 49 <div id="scrollblue" class="bottom">This text is at the bottom of the box</div> 50 </div> 51 <div id=hidden class=hidden></div> 52 </body> 53 <script> 54 scrollblue.scrollIntoView(); 55 </script>