fractional-box-with-shadow-old.html (1241B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: fractional box with shadow -- old content</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="fractional-box-with-shadow-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 .box { 10 box-shadow: -2px -3px 0 7px darkgreen; 11 margin: 15px; 12 background: green; 13 width: 100.125px; 14 height: 50.875px; 15 } 16 .shift { 17 position: relative; 18 left: 0.4px; 19 } 20 html::view-transition-group(*) { animation-duration: 300s; } 21 html::view-transition-new(*) { animation: unset; opacity: 0; } 22 html::view-transition-old(*) { animation: unset; opacity: 1; } 23 html::view-transition-group(root) { animation: unset; opacity: 0; } 24 html::view-transition { background: lightpink; } 25 </style> 26 <div class="box" style="view-transition-name: one"></div> 27 <div class="box shift" style="view-transition-name: two"></div> 28 <script> 29 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 30 31 async function runTest() { 32 document.startViewTransition().ready.then(takeScreenshot); 33 } 34 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 35 </script>