1 files changed, 53 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-animations/style-animation-parsing.html b/testing/web-platform/tests/css/css-animations/style-animation-parsing.html
new file mode 100644
index 0000000000..792fda33ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/style-animation-parsing.html
@@ -0,0 +1,53 @@
+<!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>