| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Animations: parsing style.animation</title> |
| <link rel="help" href="https://drafts.csswg.org/css-animations/#animation"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <div id="test1"></div> |
| <div id="test2"></div> |
| <script> |
| function testStyle(style1, style2, name) { |
| assert_equals(style1.animationName, name, "style1.animationName"); |
| assert_equals(style2.animationName, name, "style2.animationName"); |
| assert_equals(style1.animation, style2.animation, |
| "style1 and style2 should have the same animation"); |
| } |
| |
| function testAnimation(input, name) { |
| var style1 = test1.style; |
| var style2 = test2.style; |
| |
| style1.animation = input; |
| style2.animation = style1.animation; |
| testStyle(style1, style2, name); |
| } |
| |
| test(() => { |
| testAnimation("", ""); |
| }, "Test animation name being empty."); |
| |
| test(() => { |
| testAnimation("myShorthandAnim", "myShorthandAnim"); |
| }, "Test a non-conflicting animation name."); |
| |
| test(() => { |
| testAnimation("none", "none"); |
| testAnimation("forwards", "none"); |
| testAnimation("none forwards", "forwards"); |
| }, "Test an animation name that is the same as a possible animation fill-mode."); |
| |
| test(() => { |
| testAnimation("normal", "none"); |
| testAnimation("reverse", "none"); |
| testAnimation("normal normal", "normal"); |
| testAnimation("normal reverse", "reverse"); |
| }, "Test an animation name that is the same as a possible animation direction."); |
| |
| test(() => { |
| testAnimation("running", "none"); |
| testAnimation("paused", "none"); |
| testAnimation("running running", "running"); |
| testAnimation("running paused", "paused"); |
| }, "Test an animation name that is the same as a possible running state."); |
| </script> |
