<!DOCTYPE html> <html class=reftest-wait> <title>View transitions: universal specificity</title> <link rel="help" href="https://github.com/WICG/view-transitions"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="set-universal-specificity-ref.html"> <script src="/common/reftest-wait.js"></script> <style> #shared { contain: paint; width: 100px; height: 100px; background: blue; view-transition-name: shared; } /* We're verifying what we capture, so just display the old contents for 5 minutes. */ html::view-transition { background: pink; } html::view-transition-group(shared) { animation-duration: 300s; } html::view-transition-old(shared) { animation: unset; opacity: 1; border: 10px solid black; } html::view-transition-old(*) { border: 10px solid red; } html::view-transition-new(shared) { animation: unset; opacity: 0; } html::view-transition-old(root) { animation: unset; opacity: 0; } html::view-transition-new(root) { animation: unset; opacity: 0 } </style> <div id=shared></div> <script> failIfNot(document.startViewTransition, "Missing document.startViewTransition"); async function runTest() { document.startViewTransition(() => { requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); }); } onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); </script>