display-none-during-transition.html (2111B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <!-- TODO update link --> 7 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/"> 8 <title>Display none during transition</title> 9 </head> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <style> 13 #target { 14 background-color: teal; 15 height: 100px; 16 width: 100px; 17 position: relative; 18 view-transition-name: target; 19 } 20 21 .hidden { 22 display: none; 23 } 24 25 ::view-transition-group(*) { 26 animation: unset; 27 } 28 29 ::view-transition-old(target) { 30 animation: -ua-view-transition-fade-out 300s; 31 } 32 33 ::view-transition-new(target) { 34 animation: -ua-view-transition-fade-in 300s; 35 } 36 37 </style> 38 <body> 39 <div id="target")></div> 40 </body> 41 <script> 42 function animationsCanceledPromise() { 43 const animations = document.getAnimations(); 44 const promises = animations.map(a => a.finished); 45 return new Promise(async (resolve) => { 46 const values = await Promise.allSettled(promises); 47 values.forEach((result) => { 48 assert_equals(result.status, 'rejected'); 49 }); 50 resolve(); 51 }); 52 } 53 54 promise_test(async t => { 55 const target = document.getElementById('target'); 56 const vt = target.startViewTransition(() => { 57 target.style.backgroundColor = 'orange'; 58 }); 59 await vt.ready; 60 const animations = document.getAnimations(); 61 assert_equals(animations.length, 2, 62 'View transition has running animations'); 63 // wait for all animations to start running before hiding target. 64 await Promise.all([...animations.map(a => a.ready)]); 65 target.classList.toggle('hidden'); 66 // Verify that the finished promise is rejected for each of the started 67 // animations. 68 await animationsCanceledPromise(); 69 // Verify finished promise is resolved even though the transition did not 70 // run to completion. 71 return vt.finished; 72 }, 'Display none during a view transition skips the transition.'); 73 </script> 74 </html>