nested-elements-in-overflow.html (1651B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <meta name="timeout" content="long"> 4 <title>View transitions: nested named element in overflow</title> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 6 <link rel="author" href="mailto:khushalsagar@chromium.org"> 7 <link rel="match" href="nested-elements-in-overflow-ref.html"> 8 <meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-500"> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 :root { 12 view-transition-name: none; 13 } 14 15 .outer { 16 background: lightblue; 17 width: 100px; 18 height: 100px; 19 view-transition-name: outer; 20 position: absolute; 21 top: 50px; 22 left: 50px; 23 } 24 .inner { 25 background: lightgrey; 26 position: relative; 27 top: -50px; 28 left: -50px; 29 width: 50px; 30 height: 50px; 31 view-transition-name: inner; 32 } 33 34 ::view-transition { background: rebeccapurple; } 35 ::view-transition-group(*) { 36 animation-duration: 300s; 37 } 38 ::view-transition-group(outer) { 39 width: 50px; 40 height: 100px; 41 border: 2px solid black; 42 animation: none; 43 } 44 ::view-transition-new(*), 45 ::view-transition-old(*) { 46 position: absolute; 47 inset-block-start: unset; 48 inline-size: 100%; 49 block-size: 100%; 50 object-fit: contain; 51 } 52 ::view-transition-old(*) { 53 opacity: 0; 54 animation: none; 55 } 56 ::view-transition-new(*) { 57 opacity: 1; 58 animation: none; 59 } 60 </style> 61 <div class="outer"> 62 <div class="inner"></div> 63 </div> 64 <script> 65 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 66 67 async function runTest() { 68 document.startViewTransition().ready.then(takeScreenshot); 69 } 70 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 71 </script>