old-content-inline-with-offset-from-containing-block-clipped.html (1469B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View transitions: capture elements with display inline</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:mattwoodrow@apple.com"> 6 <link rel="match" href="inline-with-offset-from-containing-block-clipped-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 #box { 10 background: blue; 11 view-transition-name: target; 12 } 13 14 div { 15 padding-left: 8px; 16 padding-top: 8px; 17 background-color: green; 18 } 19 20 /* We're verifying what we capture, so just display the contents for 5 minutes. */ 21 html::view-transition-group(*) { animation-duration: 300s; } 22 html::view-transition-group(target) { background: green; } 23 html::view-transition-new(*) { animation: unset; opacity: 0; } 24 html::view-transition-old(*) { animation: unset; opacity: 1; } 25 /* hide the root so we show transition background to ensure we're in a transition */ 26 html::view-transition-group(root) { animation: unset; opacity: 0; } 27 html::view-transition { background: pink; } 28 29 ::view-transition-image-pair(target) { 30 overflow:clip; 31 } 32 </style> 33 34 <div> 35 <span id=box>   </span> 36 </div> 37 <script> 38 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 39 40 async function runTest() { 41 let t = document.startViewTransition(); 42 t.ready.then(takeScreenshot); 43 } 44 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 45 </script> 46 47 </html>