view-transition-name-removed-mid-transition.html (1135B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: view-transition-name removed mid transition</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <link rel="match" href="view-transition-name-removed-mid-transition-ref.html"> 7 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 .target { 11 view-transition-name:foo; 12 } 13 14 .foo { 15 position: fixed; 16 left: 0; 17 top: 0; 18 background: red; 19 width: 100px; 20 height: 100px; 21 z-index: 1000; 22 } 23 24 .bar { 25 position: fixed; 26 left: 50px; 27 top: 50px; 28 background: green; 29 width: 100px; 30 height: 100px; 31 } 32 </style> 33 34 <div class="target" id="target"> 35 <div class="foo"></div> 36 </div> 37 <div class="bar"></div> 38 39 <script> 40 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 41 42 async function runTest() { 43 let transition = document.startViewTransition(); 44 await transition.ready; 45 target.style.viewTransitionName = "none"; 46 await transition.finished; 47 takeScreenshot(); 48 } 49 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 50 </script>