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