unset-and-initial-view-transition-name.html (1357B)
1 <!DOCTYPE html> 2 <html> 3 <title>View transitions: validates that view-transition-name: unset or initial are ignored</title> 4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <style> 11 #first { 12 width: 100px; 13 height: 100px; 14 background: blue; 15 contain: paint; 16 view-transition-name: target; 17 } 18 #second { 19 width: 100px; 20 height: 100px; 21 background: blue; 22 view-transition-name: unset; 23 } 24 #third { 25 width: 100px; 26 height: 100px; 27 background: blue; 28 view-transition-name: initial; 29 } 30 </style> 31 32 <div id=first></div> 33 <div id=second></div> 34 <div id=third></div> 35 36 <script> 37 promise_test(async t => { 38 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 39 return new Promise(async (resolve, reject) => { 40 let transition = document.startViewTransition(); 41 await transition.updateCallbackDone; 42 43 // Elements with view-transition-name: initial and unset don't have 44 // containment. Because they are ignored they don't cause the transition to 45 // be skipped. 46 await transition.ready; 47 transition.finished.then(resolve, reject); 48 }); 49 }, "validates that view-transition-name: unset or initial are ignored"); 50 </script>