| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| @keyframes anim { |
| from { left: 0px; } |
| to { left: 300px; } |
| } |
| |
| #target { |
| animation: anim 10s -5s paused linear; |
| width: 100px; |
| height: 100px; |
| left: -1px; |
| position: relative; |
| background-color: green; |
| } |
| </style> |
| <div id="target"></div> |
| <script> |
| test(function() { |
| target.style.animationPlayState = 'running'; |
| target.offsetTop; // Force style recalc |
| target.style.animationPlayState = 'paused'; |
| |
| target.style.animationDuration = '3s'; // Animation ends |
| assert_equals(parseInt(getComputedStyle(target).left), -1, 'left offset'); |
| |
| target.style.animationIterationCount = 2; // Box should be 2/3 of the way across |
| assert_equals(parseInt(getComputedStyle(target).left), 200, 'left offset'); |
| |
| target.style.animationDirection = 'reverse'; // Box should be 1/3 of the way across |
| assert_equals(parseInt(getComputedStyle(target).left), 100, 'left offset'); |
| |
| target.style.animationDelay = '-4s'; // Box should be 2/3 of the way across |
| assert_equals(parseInt(getComputedStyle(target).left), 200, 'left offset'); |
| |
| target.style.animationIterationCount = 1; // Animation ends |
| target.style.animationFillMode = 'forwards'; |
| assert_equals(parseInt(getComputedStyle(target).left), 0, 'left offset'); |
| |
| }, "Changes to animation properties should be reflected immediately"); |
| </script> |
