| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>Animate() with no offsets</title> |
| <link rel="help" href="https://w3c.github.io/web-animations/#keyframe-animation-effects"> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../imported/wpt/web-animations/testcommon.js"></script> |
| <body> |
| <script> |
| 'use strict'; |
| test(function(t) { |
| var keyframes = [ |
| {opacity: '0.25', left: '25px'}, |
| {opacity: '0.75', left: '75px'}, |
| ]; |
| var expectations = { |
| 0.5: {opacity: '0.5', left: '50px'}, |
| }; |
| for (var progress in expectations) { |
| var element = createDiv(t); |
| element.animate(keyframes, { |
| duration: 1000, |
| fill: 'forwards', |
| delay: -progress * 1000, |
| }); |
| var computedStyle = getComputedStyle(element); |
| for (var property in expectations[progress]) { |
| assert_equals(computedStyle[property], expectations[progress][property], |
| property + ' at ' + (progress * 100) + '%'); |
| } |
| } |
| }, 'element.animate() with 2 keyframes'); |
| |
| test(function(t) { |
| var keyframes =[ |
| {opacity: '0', left: '0px'}, |
| {opacity: '0.25', left: '25px'}, |
| {opacity: '0.75', left: '75px'}, |
| ]; |
| var expectations = { |
| 0.25: {opacity: '0.125', left: '12.5px'}, |
| 0.75: {opacity: '0.5', left: '50px'}, |
| }; |
| for (var progress in expectations) { |
| var element = createDiv(t); |
| element.animate(keyframes, { |
| duration: 1000, |
| fill: 'forwards', |
| delay: -progress * 1000, |
| }); |
| var computedStyle = getComputedStyle(element); |
| for (var property in expectations[progress]) { |
| assert_equals(computedStyle[property], expectations[progress][property], |
| property + ' at ' + (progress * 100) + '%'); |
| } |
| } |
| }, 'element.animate() with 3 keyframes'); |
| </script> |
