massive-element-right-and-left-of-viewport-partially-onscreen-ref.html (913B)
1 <!DOCTYPE html> 2 <title>View transitions: massive element below 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 <style> 6 :root { 7 writing-mode: vertical-lr; 8 } 9 10 .target { 11 position: fixed; 12 inset-block-start: -90px; 13 inline-size: 100px; 14 block-size: 40000px; 15 view-transition-name: target; 16 } 17 18 .top { 19 inline-size: 100%; 20 block-size: 100px; 21 background: lightblue; 22 } 23 24 .middle { 25 inline-size: 100%; 26 block-size: 39800px; 27 background: green; 28 } 29 30 .bottom { 31 inline-size: 100%; 32 block-size: 100px; 33 background: blue; 34 } 35 </style> 36 <body> 37 <div class="target"> 38 <div class="top">This text is at the top of the box</div> 39 <div class="middle">This text is in the middle of the box</div> 40 <div id="scrollblue" class="bottom">This text is at the bottom of the box</div> 41 </div> 42 </body>