auto-name.html (2303B)
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>Scoped element with name auto</title> 9 </head> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <style> 13 #container { 14 display: flex; 15 flex-direction: row; 16 view-transition-name: auto; 17 position: relative; 18 } 19 20 .item { 21 background-color: teal; 22 color: white; 23 text-align: center; 24 line-height: 50px; 25 width: 50px; 26 height: 50px; 27 margin: 5px; 28 display: inline-block; 29 } 30 31 ::view-transition-group(*) { 32 animation-duration: 2s; 33 } 34 35 ::view-transition-old(*) { 36 animation-name: -ua-view-transition-fade-out; 37 } 38 39 ::view-transition-new(*) { 40 animation-name: -ua-view-transition-fade-in; 41 } 42 </style> 43 <body> 44 <div id="container"> 45 <div class="item">A</div> 46 <div class="item">B</div> 47 <div class="item">C</div> 48 </div> 49 </body> 50 <script> 51 function assert_has_animation_with_name(name, message) { 52 const results = 53 document.getAnimations().filter(a => a.animationName == name); 54 assert_equals(results.length, 1, message); 55 } 56 57 promise_test(async t => { 58 const element = document.getElementById("container"); 59 const vt = element.startViewTransition(() => { 60 element.style.flexDirection = 'column'; 61 }); 62 assert_equals(vt.transitionRoot, element); 63 await vt.ready; 64 const results = 65 document.getAnimations().map((a) => { 66 return `${a.effect.target.id}${a.effect.pseudoElement}`; 67 }).sort(); 68 const expected = [ 69 'container::view-transition-group(match-element)', 70 'container::view-transition-new(match-element)', 71 'container::view-transition-old(match-element)', 72 ]; 73 74 assert_array_equals(results, expected, 'Matched pseudo-elements'); 75 76 assert_has_animation_with_name('-ua-view-transition-fade-in', 77 'Fade in animation'); 78 assert_has_animation_with_name('-ua-view-transition-fade-out', 79 'Fade out animation'); 80 }, 'Scoped view transition with name auto on the scoped element'); 81 </script> 82 </html>