OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <meta charset=utf-8> | 2 <meta charset=utf-8> |
3 <title>Keyframe handling tests</title> | 3 <title>Effect value computation tests when keyframes overlap</title> |
4 <link rel="help" href="https://w3c.github.io/web-animations/#the-effect-value-of
-a-keyframe-animation-effect"> | 4 <link rel="help" href="https://w3c.github.io/web-animations/#the-effect-value-of
-a-keyframe-animation-effect"> |
5 <script src="/resources/testharness.js"></script> | 5 <script src="/resources/testharness.js"></script> |
6 <script src="/resources/testharnessreport.js"></script> | 6 <script src="/resources/testharnessreport.js"></script> |
7 <script src="../../testcommon.js"></script> | 7 <script src="../../testcommon.js"></script> |
8 <body> | 8 <body> |
9 <div id="log"></div> | 9 <div id="log"></div> |
10 <div id="target"></div> | 10 <div id="target"></div> |
11 <script> | 11 <script> |
12 'use strict'; | 12 'use strict'; |
13 | 13 |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
62 assert_equals(getComputedStyle(div).opacity, '0.7', | 62 assert_equals(getComputedStyle(div).opacity, '0.7', |
63 'At the overlap point, the last keyframe from the' | 63 'At the overlap point, the last keyframe from the' |
64 + ' overlap point should be used as interval startpoint'); | 64 + ' overlap point should be used as interval startpoint'); |
65 anim.currentTime = 750; | 65 anim.currentTime = 750; |
66 assert_equals(getComputedStyle(div).opacity, '0.85', | 66 assert_equals(getComputedStyle(div).opacity, '0.85', |
67 'After the overlap point, the last keyframe from the' | 67 'After the overlap point, the last keyframe from the' |
68 + ' overlap point should be used as interval startpoint'); | 68 + ' overlap point should be used as interval startpoint'); |
69 }, 'Overlapping keyframes between 0 and 1 use the appropriate value on each' | 69 }, 'Overlapping keyframes between 0 and 1 use the appropriate value on each' |
70 + ' side of the overlap point'); | 70 + ' side of the overlap point'); |
71 | 71 |
72 test(function(t) { | |
73 var div = createDiv(t); | |
74 var anim = div.animate({ visibility: ['hidden','visible'] }, | |
75 { duration: 100 * MS_PER_SEC, fill: 'both' }); | |
76 | |
77 anim.currentTime = 0; | |
78 assert_equals(getComputedStyle(div).visibility, 'hidden', | |
79 'Visibility when progress = 0.'); | |
80 | |
81 anim.currentTime = 10 * MS_PER_SEC + 1; | |
82 assert_equals(getComputedStyle(div).visibility, 'visible', | |
83 'Visibility when progress > 0 due to linear easing.'); | |
84 | |
85 anim.finish(); | |
86 assert_equals(getComputedStyle(div).visibility, 'visible', | |
87 'Visibility when progress = 1.'); | |
88 | |
89 }, "Test visibility clamping behavior."); | |
90 | |
91 test(function(t) { | |
92 var div = createDiv(t); | |
93 var anim = div.animate({ visibility: ['hidden', 'visible'] }, | |
94 { duration: 100 * MS_PER_SEC, fill: 'both', | |
95 easing: 'cubic-bezier(0.25, -0.6, 0, 0.5)' }); | |
96 | |
97 anim.currentTime = 0; | |
98 assert_equals(getComputedStyle(div).visibility, 'hidden', | |
99 'Visibility when progress = 0.'); | |
100 | |
101 // Timing function is below zero. So we expected visibility is hidden. | |
102 anim.currentTime = 10 * MS_PER_SEC + 1; | |
103 assert_equals(getComputedStyle(div).visibility, 'hidden', | |
104 'Visibility when progress < 0 due to cubic-bezier easing.'); | |
105 | |
106 anim.currentTime = 60 * MS_PER_SEC; | |
107 assert_equals(getComputedStyle(div).visibility, 'visible', | |
108 'Visibility when progress > 0 due to cubic-bezier easing.'); | |
109 | |
110 }, "Test visibility clamping behavior with an easing that has a negative compone
nt"); | |
111 | |
112 done(); | |
113 </script> | 72 </script> |
114 </body> | 73 </body> |
OLD | NEW |