third_party/WebKit/LayoutTests/imported/wpt/web-animations/timing-model/animation-effects/phases-and-states.html - Issue 2323113002: Revert "Import wpt@65954a35b4e0a5cee1f4839271ba0e44f187c0a6"

Side by Side Diff: third_party/WebKit/LayoutTests/imported/wpt/web-animations/timing-model/animation-effects/phases-and-states.html

Issue 2323113002: Revert "Import wpt@65954a35b4e0a5cee1f4839271ba0e44f187c0a6" (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 3 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/imported/wpt/web-animations/testcommon.js ('k') | third_party/WebKit/LayoutTests/imported/wpt/web-animations/timing-model/animation-effects/phases-and-states-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!doctype html>

2 <meta charset=utf-8>

3 <title>Tests for phases and states</title>

4 <link rel="help" href="https://w3c.github.io/web-animations/#animation-effect-ph ases-and-states">

5 <script src="/resources/testharness.js"></script>

6 <script src="/resources/testharnessreport.js"></script>

7 <script src="../../testcommon.js"></script>

8 <body>

9 <div id="log"></div>

10 <script>

11 'use strict';

12

13 // --------------------------------------------------------------------

14 //

15 // Phases

16 //

17 // --------------------------------------------------------------------

18

19 function assert_phase_at_time(animation, phase, currentTime) {

20 animation.currentTime = currentTime;

21

22 if (phase === 'active') {

23 // If the fill mode is 'none', then progress will only be non-null if we

24 // are in the active phase.

25 animation.effect.timing.fill = 'none';

26 assert_not_equals(animation.effect.getComputedTiming().progress, null,

27 'Animation effect is in active phase when current time'

28 + ' is ' + currentTime + 'ms');

29 } else {

30 // The easiest way to distinguish between the 'before' phase and the 'after'

31 // phase is to toggle the fill mode. For example, if the progress is null

32 // will the fill node is 'none' but non-null when the fill mode is

33 // 'backwards' then we are in the before phase.

34 animation.effect.timing.fill = 'none';

35 assert_equals(animation.effect.getComputedTiming().progress, null,

36 'Animation effect is in ' + phase + ' phase when current time'

37 + ' is ' + currentTime + 'ms'

38 + ' (progress is null with \'none\' fill mode)');

39

40 animation.effect.timing.fill = phase === 'before'

41 ? 'backwards'

42 : 'forwards';

43 assert_not_equals(animation.effect.getComputedTiming().progress, null,

44 'Animation effect is in ' + phase + ' phase when current'

45 + ' time is ' + currentTime + 'ms'

46 + ' (progress is non-null with appropriate fill mode)');

47 }

48 }

49

50 test(function(t) {

51 var animation = createDiv(t).animate(null, 1);

52

53 [ { currentTime: -1, phase: 'before' },

54 { currentTime: 0, phase: 'active' },

55 { currentTime: 1, phase: 'after' } ]

56 .forEach(function(test) {

57 assert_phase_at_time(animation, test.phase, test.currentTime);

58 });

59 }, 'Phase calculation for a simple animation effect');

60

61 test(function(t) {

62 var animation = createDiv(t).animate(null, { duration: 1, delay: 1 });

63

64 [ { currentTime: 0, phase: 'before' },

65 { currentTime: 1, phase: 'active' },

66 { currentTime: 2, phase: 'after' } ]

67 .forEach(function(test) {

68 assert_phase_at_time(animation, test.phase, test.currentTime);

69 });

70 }, 'Phase calculation for an animation effect with a positive start delay');

71

72 test(function(t) {

73 var animation = createDiv(t).animate(null, { duration: 1, delay: -1 });

74

75 [ { currentTime: -2, phase: 'before' },

76 { currentTime: -1, phase: 'active' },

77 { currentTime: 0, phase: 'after' } ]

78 .forEach(function(test) {

79 assert_phase_at_time(animation, test.phase, test.currentTime);

80 });

81 }, 'Phase calculation for an animation effect with a negative start delay');

82

83 test(function(t) {

84 var animation = createDiv(t).animate(null, { duration: 1, endDelay: 1 });

85

86 [ { currentTime: -1, phase: 'before' },

87 { currentTime: 0, phase: 'active' },

88 { currentTime: 1, phase: 'after' },

89 { currentTime: 2, phase: 'after' } ]

90 .forEach(function(test) {

91 assert_phase_at_time(animation, test.phase, test.currentTime);

92 });

93 }, 'Phase calculation for an animation effect with a positive end delay');

94

95 test(function(t) {

96 var animation = createDiv(t).animate(null, { duration: 2, endDelay: -1 });

97

98 [ { currentTime: -1, phase: 'before' },

99 { currentTime: 0, phase: 'active' },

100 { currentTime: 0.9, phase: 'active' },

101 { currentTime: 1, phase: 'after' } ]

102 .forEach(function(test) {

103 assert_phase_at_time(animation, test.phase, test.currentTime);

104 });

105 }, 'Phase calculation for an animation effect with a negative end delay lesser'

106 + ' in magnitude than the active duration');

107

108 test(function(t) {

109 var animation = createDiv(t).animate(null, { duration: 1, endDelay: -1 });

110

111 [ { currentTime: -1, phase: 'before' },

112 { currentTime: 0, phase: 'after' },

113 { currentTime: 1, phase: 'after' } ]

114 .forEach(function(test) {

115 assert_phase_at_time(animation, test.phase, test.currentTime);

116 });

117 }, 'Phase calculation for an animation effect with a negative end delay equal'

118 + ' in magnitude to the active duration');

119

120 test(function(t) {

121 var animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 });

122

123 [ { currentTime: -2, phase: 'before' },

124 { currentTime: -1, phase: 'after' } ]

125 .forEach(function(test) {

126 assert_phase_at_time(animation, test.phase, test.currentTime);

127 });

128 }, 'Phase calculation for an animation effect with a negative end delay'

129 + ' greater in magnitude than the active duration');

130

131 test(function(t) {

132 var animation = createDiv(t).animate(null, { duration: 2,

133 delay: 1,

134 endDelay: -1 });

135

136 [ { currentTime: 0, phase: 'before' },

137 { currentTime: 1, phase: 'active' },

138 { currentTime: 2, phase: 'after' } ]

139 .forEach(function(test) {

140 assert_phase_at_time(animation, test.phase, test.currentTime);

141 });

142 }, 'Phase calculation for an animation effect with a positive start delay'

143 + ' and a negative end delay lesser in magnitude than the active duration');

144

145 test(function(t) {

146 var animation = createDiv(t).animate(null, { duration: 1,

147 delay: -1,

148 endDelay: -1 });

149

150 [ { currentTime: -2, phase: 'before' },

151 { currentTime: -1, phase: 'after' } ]

152 .forEach(function(test) {

153 assert_phase_at_time(animation, test.phase, test.currentTime);

154 });

155 }, 'Phase calculation for an animation effect with a negative start delay'

156 + ' and a negative end delay equal in magnitude to the active duration');

157

158 test(function(t) {

159 var animation = createDiv(t).animate(null, { duration: 1,

160 delay: -1,

161 endDelay: -2 });

162

163 [ { currentTime: -3, phase: 'before' },

164 { currentTime: -2, phase: 'after' } ]

165 .forEach(function(test) {

166 assert_phase_at_time(animation, test.phase, test.currentTime);

167 });

168 }, 'Phase calculation for an animation effect with a negative start delay'

169 + ' and a negative end delay equal greater in magnitude than the active'

170 + ' duration');

171

172 test(function(t) {

173 var animation = createDiv(t).animate(null, 1);

174 animation.playbackRate = -1;

175

176 [ { currentTime: -1, phase: 'before' },

177 { currentTime: 0, phase: 'before' },

178 { currentTime: 1, phase: 'active' },

179 { currentTime: 2, phase: 'after' } ]

180 .forEach(function(test) {

181 assert_phase_at_time(animation, test.phase, test.currentTime);

182 });

183 }, 'Phase calculation for a simple animation effect with negative playback'

184 + ' rate');

185

186 </script>

187 </body>

OLD	NEW