<!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below viewport partially onscreen (new content)</title> <link rel="help" href="https://github.com/WICG/view-transitions"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-right-of-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-right-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330"> <script src="/common/reftest-wait.js"></script> <style> :root { writing-mode: vertical-lr; } .target { inline-size: 100px; block-size: 40000px; view-transition-name: target; } .top { inline-size: 100%; block-size: 100px; background: lightblue; } .middle { inline-size: 100%; block-size: 39800px; background: green; } .bottom { inline-size: 100%; block-size: 100px; background: blue; } .hidden { contain: paint; inline-size: 10px; block-size: 10px; background: grey; view-transition-name: hidden; } html::view-transition-group(hidden) { animation-duration: 300s; } html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; } html::view-transition-old(*), html::view-transition-new(*) { object-fit: none; } html::view-transition-old(target) { animation: unset; opacity: 0; } html::view-transition-new(target) { animation: unset; opacity: 1; } </style> <div class="target"> <div class="top">This text is at the top of the box</div> <div class="middle">This text is in the middle of the box</div> <div id="scrollblue" class="bottom">This text is at the bottom of the box</div> </div> <div id=hidden class=hidden></div> <script> failIfNot(document.startViewTransition, "Missing document.startViewTransition"); async function runTest() { document.startViewTransition(() => { requestAnimationFrame(() => requestAnimationFrame(() => requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)) )); }); } onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); </script>