revert-val-006.html (867B)
1 <!DOCTYPE html> 2 <title>CSS Cascade: 'revert' keyword in keyframe animations</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade/#default"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 @keyframes test { 8 from { margin-top: 0px; } 9 50% { margin-top: revert; } 10 to { margin-top: 0px; } 11 } 12 #h1 { 13 margin-top: 0px; 14 animation: test linear 1000s -500s paused; 15 } 16 </style> 17 <h1 id=h1></h1> 18 <h1 id=ref></h1> 19 <script> 20 test(function() { 21 let actual = getComputedStyle(h1).marginTop; 22 let expected = getComputedStyle(ref).marginTop; 23 // This test assumes that the UA style sheet sets a non-0px value on 24 // <h1> elements: 25 assert_not_equals(expected, '0px'); 26 assert_equals(actual, expected); 27 }, 'The revert keyword works with @keyframes'); 28 </script>