to-keyframe-values.html (1285B)
1 <!DOCTYPE html> 2 <title>CSS View Transitions: Verify to keyframe values</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 :root { view-transition-name: none } 8 #item { 9 view-transition-name: item; 10 width: 10px; 11 height: 10px; 12 position: relative; 13 } 14 .shifted { 15 left: 20px; 16 } 17 ::view-transition-group(*) { 18 animation-play-state: paused; 19 } 20 </style> 21 <div id=item></div> 22 23 <script> 24 async_test((t) => { 25 document.startViewTransition(() => item.classList.add("shifted")).ready.then(() => { 26 let anims = document.getAnimations().filter(a => { 27 return a.effect.pseudoElement == '::view-transition-group(item)'; 28 }); 29 30 t.step(() => { 31 assert_equals(anims.length, 1); 32 assert_equals(anims[0].effect.getKeyframes().length, 2); 33 assert_true(anims[0].effect.getKeyframes()[0].transform.startsWith("matrix"), 34 `keyframe[0] should be matrix, not ${anims[0].effect.getKeyframes()[0].transform}`); 35 assert_true(anims[0].effect.getKeyframes()[1].transform.startsWith("matrix"), 36 `keyframe[1] should be matrix, not ${anims[0].effect.getKeyframes()[1].transform}`); 37 }); 38 t.done(); 39 }); 40 }); 41 </script>