document-active-view-transition.html (1720B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>View Transition: document.activeViewTransition attribute</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/#dom-document-activeviewtransition"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="support/utils.js"></script> 10 11 <style> 12 #target { 13 width: 100px; 14 height: 100px; 15 view-transition-name: target; 16 } 17 ::view-transition-group(*) { 18 animation-duration: 1ms; 19 } 20 </style> 21 22 <div id=target></div> 23 24 <script> 25 promise_test(async t => { 26 assert_implements(document.startViewTransition, "View Transitions are not supported"); 27 28 assert_equals(document.activeViewTransition, null, "activeViewTransition is null initially"); 29 30 const transition = document.startViewTransition(() => {}); 31 assert_equals(document.activeViewTransition, transition, "activeViewTransition returns the running transition"); 32 33 await transition.finished; 34 35 assert_equals(document.activeViewTransition, null, "activeViewTransition is null after transition finishes"); 36 37 38 const transition2 = document.startViewTransition(() => {}); 39 assert_equals(document.activeViewTransition, transition2, "activeViewTransition returns the running transition (2)"); 40 41 transition2.skipTransition(); 42 43 assert_equals(document.activeViewTransition, null, "activeViewTransition is null after transition is skipped"); 44 45 let [result] = await Promise.allSettled([transition2.ready]); 46 assert_equals(result.status, "rejected", "ready promise should be rejected due to skipTransition call"); 47 }, "document.activeViewTransition returns the active transition"); 48 </script>