| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <meta charset=utf-8> | |
| 3 <title>Animate() with no offsets</title> | |
| 4 <link rel="help" href="https://w3c.github.io/web-animations/#keyframe-animation-
effects"> | |
| 5 <script src="../../resources/testharness.js"></script> | |
| 6 <script src="../../resources/testharnessreport.js"></script> | |
| 7 <script src="../../external/wpt/web-animations/testcommon.js"></script> | |
| 8 <body> | |
| 9 <script> | |
| 10 'use strict'; | |
| 11 test(function(t) { | |
| 12 var keyframes = [ | |
| 13 {opacity: '0.25', left: '25px'}, | |
| 14 {opacity: '0.75', left: '75px'}, | |
| 15 ]; | |
| 16 var expectations = { | |
| 17 0.5: {opacity: '0.5', left: '50px'}, | |
| 18 }; | |
| 19 for (var progress in expectations) { | |
| 20 var element = createDiv(t); | |
| 21 element.animate(keyframes, { | |
| 22 duration: 1000, | |
| 23 fill: 'forwards', | |
| 24 delay: -progress * 1000, | |
| 25 }); | |
| 26 var computedStyle = getComputedStyle(element); | |
| 27 for (var property in expectations[progress]) { | |
| 28 assert_equals(computedStyle[property], expectations[progress][property], | |
| 29 property + ' at ' + (progress * 100) + '%'); | |
| 30 } | |
| 31 } | |
| 32 }, 'element.animate() with 2 keyframes'); | |
| 33 | |
| 34 test(function(t) { | |
| 35 var keyframes =[ | |
| 36 {opacity: '0', left: '0px'}, | |
| 37 {opacity: '0.25', left: '25px'}, | |
| 38 {opacity: '0.75', left: '75px'}, | |
| 39 ]; | |
| 40 var expectations = { | |
| 41 0.25: {opacity: '0.125', left: '12.5px'}, | |
| 42 0.75: {opacity: '0.5', left: '50px'}, | |
| 43 }; | |
| 44 for (var progress in expectations) { | |
| 45 var element = createDiv(t); | |
| 46 element.animate(keyframes, { | |
| 47 duration: 1000, | |
| 48 fill: 'forwards', | |
| 49 delay: -progress * 1000, | |
| 50 }); | |
| 51 var computedStyle = getComputedStyle(element); | |
| 52 for (var property in expectations[progress]) { | |
| 53 assert_equals(computedStyle[property], expectations[progress][property], | |
| 54 property + ' at ' + (progress * 100) + '%'); | |
| 55 } | |
| 56 } | |
| 57 }, 'element.animate() with 3 keyframes'); | |
| 58 </script> | |
| OLD | NEW |