revert-val-007.html (1150B)
1 <!DOCTYPE html> 2 <title>CSS Cascade: 'revert' in keyframe animations on identical elements</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade/#default"> 4 <link rel="help" href="https://crbug.com/1065387"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 @keyframes test { 9 from { margin-top: revert; } 10 to { margin-top: 100px; } 11 } 12 .anim { 13 margin-top: 0px; 14 animation: test linear 1s paused; 15 } 16 </style> 17 <h1 class="anim"></h1> 18 <h1 class="anim"></h1> 19 <h1 class="anim"></h1> 20 <h1 id=ref></h1> 21 <script> 22 test(function() { 23 // This querySelectorAll includes #ref, but that's OK. 24 let targets = document.querySelectorAll('h1'); 25 for (let t of targets) { 26 let actual = getComputedStyle(t).marginTop; 27 let expected = getComputedStyle(ref).marginTop; 28 // This test assumes that the UA style sheet sets a non-0px value on 29 // <h1> elements: 30 assert_not_equals(expected, '0px'); 31 assert_equals(actual, expected); 32 } 33 }, 'A @keyframe animation with revert works when applied to multiple identical elements'); 34 </script>