<!DOCTYPE html> <html class=reftest-wait> <title>Shared transitions: old content captures an empty div</title> <link rel="help" href="https://github.com/WICG/view-transitions"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="old-content-is-empty-div-ref.html"> <script src="/common/reftest-wait.js"></script> <style> div { contain: paint; width: 100px; height: 100px; position: absolute; top: 50px; } #empty { left: 50px; } #target { left: 200px; background: green; } #hidden { background: red; } html::view-transition-group(hidden) { animation-duration: 300s; } html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; } /* The effect of the following should be position at the outgoing element but contents of the new element. */ html::view-transition-group(shared) { animation-delay: 100s; } html::view-transition-new(shared) { animation: unset; opacity: 1; } html::view-transition-old(shared) { animation: unset; opacity: 1; } html::view-transition-group(root) { animation: unset; opacity: 0; } html::view-transition { background: lightpink; } </style> <div id=empty></div> <div id=target></div> <div id=hidden></div> <script> failIfNot(document.startViewTransition, "Missing document.startViewTransition"); async function runTest() { empty.style.viewTransitionName = "shared"; document.startViewTransition(() => { empty.style.viewTransitionName = ""; target.style.viewTransitionName = "shared"; requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)) }); } onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); </script>