Index: third_party/WebKit/LayoutTests/animations/animation-direction-alternate.html |
diff --git a/third_party/WebKit/LayoutTests/animations/animation-direction-alternate.html b/third_party/WebKit/LayoutTests/animations/animation-direction-alternate.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..2d1395b527c3aca5a9b4d25d1adc44819546365e |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/animations/animation-direction-alternate.html |
@@ -0,0 +1,50 @@ |
+<!DOCTYPE html> |
+<title>Test of animation-direction</title> |
+<script src="../resources/testharness.js"></script> |
+<script src="../resources/testharnessreport.js"></script> |
+<style> |
+ #target { |
+ animation-direction: alternate; |
+ animation-duration: 2s; |
+ animation-iteration-count: 2; |
+ animation-name: move; |
+ animation-play-state: paused; |
+ animation-timing-function: linear; |
+ animation-fill-mode: both; |
+ |
+ |
+ background-color: red; |
+ height: 100px; |
+ left: 500px; |
+ position: absolute; |
+ width: 100px; |
+ } |
+ @keyframes move { |
+ from { left: 0px; } |
+ to { left: 400px; } |
+ } |
+ |
+</style> |
+<div id="target"></div> |
+<script> |
+ 'use strict'; |
+ test(function() { |
+ target.style.animationDelay = '1s'; |
+ assert_equals(getComputedStyle(target).left, '0px'); |
+ |
+ target.style.animationDelay = '-0.5s'; |
+ assert_equals(getComputedStyle(target).left, '100px'); |
+ |
+ target.style.animationDelay = '-1.5s'; |
+ assert_equals(getComputedStyle(target).left, '300px'); |
+ |
+ target.style.animationDelay = '-2.5s'; |
+ assert_equals(getComputedStyle(target).left, '300px'); |
+ |
+ target.style.animationDelay = '-3.5s'; |
+ assert_equals(getComputedStyle(target).left, '100px'); |
+ |
+ target.style.animationDelay = '-5s'; |
+ assert_equals(getComputedStyle(target).left, '0px'); |
+ }, "animation-direction alternate plays forwards, then backwards"); |
+</script> |