| <!DOCTYPE html> |
| <title>Test of animation-direction</title> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| .box { |
| animation-delay: 1s; |
| animation-direction: reverse; |
| animation-duration: 1s; |
| animation-name: anim; |
| animation-timing-function: linear; |
| height: 100px; |
| left: 100px; |
| position: relative; |
| width: 100px; |
| } |
| @keyframes anim { |
| from { left: 200px; } |
| to { left: 300px; } |
| } |
| #none { |
| animation-fill-mode: none; |
| background-color: blue; |
| } |
| #backwards { |
| animation-fill-mode: backwards; |
| background-color: red; |
| } |
| #forwards { |
| animation-fill-mode: forwards; |
| background-color: green; |
| } |
| #both { |
| animation-fill-mode: both; |
| background-color: yellow; |
| } |
| </style> |
| <div id="none" class="box"> |
| None |
| </div> |
| <div id="backwards" class="box"> |
| Backwards |
| </div> |
| <div id="forwards" class="box"> |
| Forwards |
| </div> |
| <div id="both" class="box"> |
| Both |
| </div> |
| <script> |
| 'use strict'; |
| test(function() { |
| none.style.animationDelay = '1s'; |
| assert_equals(getComputedStyle(none).left, '100px'); |
| |
| backwards.style.animationDelay = '1s'; |
| assert_equals(getComputedStyle(backwards).left, '300px'); |
| |
| forwards.style.animationDelay = '1s'; |
| assert_equals(getComputedStyle(forwards).left, '100px'); |
| |
| both.style.animationDelay = '1s'; |
| assert_equals(getComputedStyle(both).left, '300px'); |
| |
| |
| none.style.animationDelay = '-5s'; |
| assert_equals(getComputedStyle(none).left, '100px'); |
| |
| backwards.style.animationDelay = '-5s'; |
| assert_equals(getComputedStyle(backwards).left, '100px'); |
| |
| forwards.style.animationDelay = '-5s'; |
| assert_equals(getComputedStyle(forwards).left, '200px'); |
| |
| both.style.animationDelay = '-5s'; |
| assert_equals(getComputedStyle(both).left, '200px'); |
| }, "animation directions work with fill modes"); |
| </script> |
