style-animation-parsing.html (1761B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Animations: parsing style.animation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations/#animation"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id="test1"></div> 8 <div id="test2"></div> 9 <script> 10 function testStyle(style1, style2, name) { 11 assert_equals(style1.animationName, name, "style1.animationName"); 12 assert_equals(style2.animationName, name, "style2.animationName"); 13 assert_equals(style1.animation, style2.animation, 14 "style1 and style2 should have the same animation"); 15 } 16 17 function testAnimation(input, name) { 18 var style1 = test1.style; 19 var style2 = test2.style; 20 21 style1.animation = input; 22 style2.animation = style1.animation; 23 testStyle(style1, style2, name); 24 } 25 26 test(() => { 27 testAnimation("", ""); 28 }, "Test animation name being empty."); 29 30 test(() => { 31 testAnimation("myShorthandAnim", "myShorthandAnim"); 32 }, "Test a non-conflicting animation name."); 33 34 test(() => { 35 testAnimation("none", "none"); 36 testAnimation("forwards", "none"); 37 testAnimation("none forwards", "forwards"); 38 }, "Test an animation name that is the same as a possible animation fill-mode."); 39 40 test(() => { 41 testAnimation("normal", "none"); 42 testAnimation("reverse", "none"); 43 testAnimation("normal normal", "normal"); 44 testAnimation("normal reverse", "reverse"); 45 }, "Test an animation name that is the same as a possible animation direction."); 46 47 test(() => { 48 testAnimation("running", "none"); 49 testAnimation("paused", "none"); 50 testAnimation("running running", "running"); 51 testAnimation("running paused", "paused"); 52 }, "Test an animation name that is the same as a possible running state."); 53 </script>