<!DOCTYPE html> <html class=reftest-wait> <title>View transitions: element with clip</title> <link rel="help" href="https://github.com/WICG/view-transitions"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-with-clip-ref.html"> <script src="/common/reftest-wait.js"></script> <style> .target { contain: paint; width: 100px; height: 100vh; position: relative; top: 50vh; display: inline-block; } .embedded { width: 100%; height: 50%; } .hidden { contain: paint; width: 10px; height: 10px; background: grey; view-transition-name: hidden; } /* Makes sure the viewport height is consistent for scrollbars to align */ body { height: 150vh; } html::view-transition { background: pink; height: 100%; } html::view-transition-group(hidden) { animation-duration: 300s; } html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; } html::view-transition-group(target1), html::view-transition-group(target2) { position: absolute; top: -50vh; } html::view-transition-old(target1) { animation: unset; opacity: 1; } html::view-transition-new(target2) { animation: unset; opacity: 1; } html::view-transition-group(root) { display: none } </style> <div id="target1" class="target" style="view-transition-name: target1"> <div class="embedded" style="background: green;"></div> <div class="embedded" style="background: blue"></div> </div> <div id="target2" class="target"> <div class="embedded" style="background: green;"></div> <div class="embedded" style="background: blue"></div> </div> <div id=hidden class=hidden></div> <script> failIfNot(document.startViewTransition, "Missing document.startViewTransition"); async function runTest() { let transition = document.startViewTransition(() => { target1.style = ""; target2.style = "view-transition-name: target2"; }); transition.ready.then(takeScreenshot); } onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); </script>