group-children-animations.html (1865B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>CSS Animations and Web Animations on view transition pseudos</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations-1/"> 5 <link rel="help" href="https://drafts.csswg.org/web-animations-1/#dom-animatable-animate"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../css-animations/support/testcommon.js"></script> 9 <style> 10 :root { 11 view-transition-name: none; 12 } 13 #container { 14 view-transition-name: container; 15 view-transition-group: contain; 16 17 width: 20px; 18 height: 20px; 19 20 border: 12px solid black; 21 border-radius: 20px; 22 corner-shape: bevel; 23 } 24 #container.updated { 25 border: 30px solid black; 26 border-radius: 40px; 27 corner-shape: squircle; 28 } 29 30 #child { 31 view-transition-name: child; 32 width: 10px; 33 height: 10px; 34 } 35 36 ::view-transition-group-children(*) { 37 animation-duration: 5s; 38 animation-play-state: paused; 39 } 40 41 ::view-transition-group(*), 42 ::view-transition-image-pair(*), 43 ::view-transition-old(*), 44 ::view-transition-new(*) { 45 animation: unset; 46 } 47 </style> 48 49 <div id=container> 50 <div id=child></div> 51 </div> 52 53 <script> 54 promise_test(async t => { 55 let viewTransition = document.startViewTransition(() => { container.classList.add("updated"); }); 56 await viewTransition.ready; 57 58 let anims = document.documentElement.getAnimations({ subtree: true }); 59 assert_equals(anims.length, 1, "Has 1 CSS Animations."); 60 let style = getComputedStyle(document.documentElement, 61 "::view-transition-group-children(container)"); 62 assert_equals(style.borderWidth, "12px"); 63 assert_equals(style.borderRadius, "20px"); 64 assert_equals(style.cornerShape, "bevel"); 65 66 anims[0].finish(); 67 assert_equals(style.borderWidth, "30px"); 68 assert_equals(style.borderRadius, "40px"); 69 assert_equals(style.cornerShape, "squircle"); 70 }); 71 </script>