massive-element-right-of-viewport-offscreen-ref.html (1026B)
1 <!DOCTYPE html> 2 <html> 3 <title>View transitions: massive element below viewport and completely offscreen (ref)</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 7 <style> 8 :root { 9 writing-mode: vertical-lr; 10 } 11 12 .target_after_bottom_edge { 13 position: fixed; 14 inset-block-start: 0px; 15 inset-inline-start: 0px; 16 } 17 18 .target { 19 contain: paint; 20 inline-size: 100px; 21 block-size: 40000px; 22 view-transition-name: target; 23 } 24 25 .top { 26 inline-size: 100%; 27 block-size: 100px; 28 background: lightblue; 29 } 30 31 .middle { 32 inline-size: 100%; 33 block-size: 39800px; 34 background: green; 35 } 36 37 .bottom { 38 inline-size: 100%; 39 block-size: 100px; 40 background: blue; 41 } 42 43 </style> 44 45 <div class="target target_after_bottom_edge" id="target"> 46 <div class="top">This text is at the top of the box</div> 47 <div class="middle">This text is in the middle of the box</div> 48 <div id="scrollblue" class="bottom">This text is at the bottom of the box</div> 49 </div>