inline-element-size.html (1367B)
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:vmpstr@chromium.org"> 6 <link rel="match" href="inline-element-size-ref.html"> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 :root { 11 font: 20px/1 Ahem; 12 } 13 14 #box { 15 background: green; 16 view-transition-name: target; 17 } 18 19 /* We're verifying what we capture, so just display the old contents for 5 minutes. */ 20 html::view-transition-group(*) { animation-duration: 300s; } 21 html::view-transition-group(target) { background: green; } 22 html::view-transition-new(*) { animation: unset; opacity: 0; } 23 html::view-transition-old(*) { animation: unset; opacity: 1; } 24 /* hide the root so we show transition background to ensure we're in a transition */ 25 html::view-transition-group(root) { animation: unset; opacity: 0; } 26 html::view-transition { background: pink; } 27 </style> 28 29 <span id=box>BOX</span> 30 <script> 31 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 32 33 async function runTest() { 34 let t = document.startViewTransition(); 35 t.ready.then(takeScreenshot); 36 } 37 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 38 </script> 39 40 </html>