<!DOCTYPE html> <html class=reftest-wait> <title>Shared transitions: shared element with overflow</title> <link rel="help" href="https://github.com/WICG/shared-element-transitions"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-with-overflow-ref.html"> <script src="/common/reftest-wait.js"></script> <style> .target { width: 100px; height: 100px; contain: paint; background: blue; overflow-clip-margin: 50px; page-transition-tag: target; } .child { width: 200px; height: 200px; position: relative; top: 50px; left: 50px; background: green; } html::page-transition-container(target) { animation-duration: 300s; } html::page-transition-outgoing-image(target) { animation: unset; opacity: 0; } html::page-transition-incoming-image(target) { animation: unset; opacity: 1; } html::page-transition-container(root) { animation: unset; opacity: 0; } html::page-transition { background: lightpink; } </style> <div class=target> <div class=child> </div> </div> <script> async function runTest() { document.createDocumentTransition().start(() => requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))); } onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); </script>