massive-element-below-viewport-partially-onscreen-ref.html (1323B)
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 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style> 7 :root { 8 font: 12px/1 Ahem; 9 } 10 11 .target { 12 contain: paint; 13 inline-size: 100px; 14 block-size: 40000px; 15 view-transition-name: target; 16 } 17 18 .top { 19 /* Ahem font sometimes causes slight difference between actual and reference 20 images due to anti-aliasing when bordering the white background in this 21 case. Adding a padding reduces the test flakiness. */ 22 padding-top: 1px; 23 inline-size: 100%; 24 block-size: 100px; 25 background: lightblue; 26 } 27 28 .middle { 29 inline-size: 100%; 30 block-size: 39800px; 31 background: green; 32 } 33 34 .bottom { 35 inline-size: 100%; 36 block-size: 100px; 37 background: blue; 38 } 39 40 .hidden { 41 contain: paint; 42 inline-size: 10px; 43 block-size: 10px; 44 background: grey; 45 visibility: hidden; 46 } 47 </style> 48 <body> 49 <div class="target"> 50 <div class="top">This text is at the top of the box</div> 51 <div class="middle">This text is in the middle of the box</div> 52 <div id="scrollblue" class="bottom">This text is at the bottom of the box</div> 53 </div> 54 <div id=hidden class=hidden></div> 55 </body>