auto-name-on-descendant.html (3162B)
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 on descendant</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 position: relative; 17 /* Currently needed to force a stacking context in the absence of an 18 animation-name. 19 */ 20 will-change: opacity; 21 view-transition-name: none; 22 } 23 24 .item { 25 background-color: teal; 26 color: white; 27 text-align: center; 28 line-height: 50px; 29 width: 50px; 30 height: 50px; 31 margin: 5px; 32 position: relative; 33 will-change: opacity; 34 view-transition-name: auto; 35 } 36 37 #item1.active { 38 background-color: orange; 39 transform: scale(1.2); 40 } 41 42 #item2.active { 43 background-color: salmon; 44 transform: scale(0.9); 45 } 46 47 #item3.active { 48 background-color: hotpink; 49 transform: scale(0.8) translateX(-10px); 50 } 51 52 ::view-transition-group(*) { 53 animation-duration: 2s; 54 } 55 56 ::view-transition-old(*) { 57 animation-name: -ua-view-transition-fade-out; 58 } 59 60 ::view-transition-new(*) { 61 animation-name: -ua-view-transition-fade-in; 62 } 63 64 </style> 65 <body> 66 <div id="container"> 67 <div id="item1" class="item">A</div> 68 <div id="item2" class="item">B</div> 69 <div id="item3" class="item">C</div> 70 </div> 71 </body> 72 <script> 73 function assert_has_animations_with_name(name, count, message) { 74 const results = 75 document.getAnimations().filter(a => a.animationName == name); 76 assert_equals(results.length, count, message); 77 } 78 79 promise_test(async t => { 80 const element = document.getElementById("container"); 81 const vt = element.startViewTransition(() => { 82 element.querySelectorAll('.item').forEach(el => { 83 el.classList.toggle('active'); 84 }); 85 }); 86 await vt.ready; 87 const results = 88 document.getAnimations().map((a) => { 89 return `${a.effect.target.id}${a.effect.pseudoElement}`; 90 }).sort(); 91 const expected = [ 92 'container::view-transition-group(match-element)', 93 'container::view-transition-group(match-element)', 94 'container::view-transition-group(match-element)', 95 'container::view-transition-new(match-element)', 96 'container::view-transition-new(match-element)', 97 'container::view-transition-new(match-element)', 98 'container::view-transition-old(match-element)', 99 'container::view-transition-old(match-element)', 100 'container::view-transition-old(match-element)', 101 ]; 102 103 assert_array_equals(results, expected, 'Matched pseudo-elements'); 104 105 assert_has_animations_with_name('-ua-view-transition-fade-in', 3, 106 'Fade in animation'); 107 assert_has_animations_with_name('-ua-view-transition-fade-out', 3, 108 'Fade out animation'); 109 }, 'Scoped view transition with name auto on the scoped element'); 110 </script> 111 </html>