| <!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> |
