massive-element-left-of-viewport-offscreen-ref.html (1010B)
1 <!DOCTYPE html> 2 <title>View transitions: massive element on top of viewport and completely offscreen (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_at_bottom_edge { 11 position: fixed; 12 inset-block-end: 0; 13 inset-inline-start: 0; 14 } 15 16 .target { 17 contain: paint; 18 inline-size: 100px; 19 block-size: 40000px; 20 view-transition-name: target; 21 } 22 23 .top { 24 inline-size: 100%; 25 block-size: 100px; 26 background: lightblue; 27 } 28 29 .middle { 30 inline-size: 100%; 31 block-size: 39800px; 32 background: green; 33 } 34 35 .bottom { 36 inline-size: 100%; 37 block-size: 100px; 38 background: blue; 39 } 40 </style> 41 <body> 42 <div class="target target_at_bottom_edge"> 43 <div class="top">This text is at the top of the box</div> 44 <div class="middle">This text is in the middle of the box</div> 45 <div id="scrollblue" class="bottom">This text is at the bottom of the box</div> 46 </div> 47 </body>