missing-view-transition-name.html (1626B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- TODO update link --> 6 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>Missing view transition name</title> 9 </head> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/css/css-view-transitions/support/common.js"></script> 13 <style> 14 #target { 15 background-color: blue; 16 width: 100px; 17 height: 100px; 18 } 19 </style> 20 <body> 21 <div id="target"></div> 22 </body> 23 <script> 24 promise_test(async () => { 25 const target = document.getElementById('target'); 26 const vt1 = document.startViewTransition(() => { 27 target.style.opacity = 0.5; 28 }); 29 await vt1.ready; 30 31 const vt2 = target.startViewTransition(() => { 32 target.style.backgroundColor = 'green'; 33 }); 34 await vt2.ready; 35 36 const expected_root_pseudos = [ 37 '::view-transition-group(root)', 38 '::view-transition-new(root)', 39 '::view-transition-old(root)' 40 ]; 41 const expected_target_pseudos = [ 42 '::view-transition-group(root)', 43 '::view-transition-new(root)', 44 '::view-transition-old(root)' 45 ]; 46 47 assert_animation_pseudos( 48 document.documentElement, expected_root_pseudos, 49 'Document element has animation-name: root by default'); 50 assert_animation_pseudos( 51 target, expected_target_pseudos, 52 'No implicit view-transition name for scoped view transition'); 53 54 }, 'Scoped view transition excludes animations for root element'); 55 </script> 56 </html>