massive-element-left-of-viewport-offscreen-old.html (2454B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: massive element on top of viewport and completely offscreen (old content)</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <link rel="match" href="massive-element-left-of-viewport-offscreen-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-330"> 8 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 :root { 12 writing-mode: vertical-lr; 13 } 14 15 .target_before_block_start_edge { 16 position: fixed; 17 inset-block-start: -40100px; 18 inset-inline-start: 0px; 19 } 20 21 .target { 22 contain: paint; 23 inline-size: 100px; 24 block-size: 40000px; 25 view-transition-name: target; 26 } 27 28 .top { 29 inline-size: 100%; 30 block-size: 100px; 31 background: lightblue; 32 } 33 34 .middle { 35 inline-size: 100%; 36 block-size: 39800px; 37 background: green; 38 } 39 40 .bottom { 41 inline-size: 100%; 42 block-size: 100px; 43 background: blue; 44 } 45 46 .hidden { 47 contain: paint; 48 inline-size: 10px; 49 block-size: 10px; 50 background: grey; 51 view-transition-name: hidden; 52 } 53 54 html::view-transition-group(hidden) { animation-duration: 300s; } 55 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; } 56 57 html::view-transition-old(*), html::view-transition-new(*) { 58 object-fit: none; 59 } 60 61 /* We should capture at least viewport height worth of content from the element's bottom edge */ 62 html::view-transition-group(target) { 63 animation: unset; 64 transform: unset; 65 66 position: fixed; 67 top: unset; 68 left: unset; 69 inset-block-end: 0; 70 inset-inline-start: 0; 71 } 72 html::view-transition-old(target) { animation: unset; opacity: 1; } 73 html::view-transition-new(target) { animation: unset; opacity: 0; } 74 75 </style> 76 77 <div class="target target_before_block_start_edge" id="target"> 78 <div class="top">This text is at the top of the box</div> 79 <div class="middle">This text is in the middle of the box</div> 80 <div id="scrollblue" class="bottom">This text is at the bottom of the box</div> 81 </div> 82 <div id=hidden class=hidden></div> 83 84 <script> 85 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 86 87 async function runTest() { 88 document.startViewTransition(() => { 89 requestAnimationFrame(() => requestAnimationFrame(() => 90 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)) 91 )); 92 }); 93 } 94 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 95 </script>