revert-val-010.html (1205B)
1 <!DOCTYPE html> 2 <title>CSS Cascade: 'revert' appearing in setKeyframes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade/#default"> 4 <link rel="help" href="https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-setkeyframes"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <h1 id=h1></h1> 8 <script> 9 test(function() { 10 let original = parseInt(getComputedStyle(h1).marginTop); 11 12 // This test assumes that the UA style sheet sets a non-0px value on 13 // <h1> elements: 14 assert_not_equals(original, 0); 15 16 let animation = h1.animate([ 17 { marginTop: `${original*4}px` }, 18 { marginTop: `${original*8}px` }, 19 ], { 20 duration: 1000000, 21 delay: -500000, 22 easing: 'steps(2, end)' 23 }); 24 25 let animated = parseInt(getComputedStyle(h1).marginTop); 26 assert_equals(animated, original*6); 27 28 animation.effect.setKeyframes([ 29 { marginTop: 'revert' }, 30 { marginTop: `${original*3}px` }, 31 ]); 32 33 let animated_revert = parseInt(getComputedStyle(h1).marginTop); 34 assert_equals(animated_revert, original*2); 35 }, 'The revert works when appearing in setKeyframes'); 36 </script>