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 |