third_party/WebKit/LayoutTests/external/wpt/web-animations/interfaces/AnimationEffectTiming/easing.html - Issue 2704543002: Import wpt@3bd204d7e86fd81e98e63f4ce59b95d98bad1c54

Side by Side Diff: third_party/WebKit/LayoutTests/external/wpt/web-animations/interfaces/AnimationEffectTiming/easing.html

Issue 2704543002: Import wpt@3bd204d7e86fd81e98e63f4ce59b95d98bad1c54 (Closed)

Patch Set: Created 3 years, 10 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:

« no previous file with comments | « third_party/WebKit/LayoutTests/external/wpt/web-animations/interfaces/Animatable/animate.html ('k') | third_party/WebKit/LayoutTests/external/wpt/web-animations/interfaces/KeyframeEffect/constructor.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <meta charset=utf-8>	2 <meta charset=utf-8>

3 <title>easing tests</title>	3 <title>easing tests</title>

4 <link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffect timing-easing">	4 <link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffect timing-easing">

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 <script src="../../resources/effect-easing-tests.js"></script>	8 <script src="../../resources/easing-tests.js"></script>

9 <body>	9 <body>

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

11 <script>	11 <script>

12 'use strict';	12 'use strict';

13	13

14 function assert_progress(animation, currentTime, easingFunction) {	14 function assert_progress(animation, currentTime, easingFunction) {

15 animation.currentTime = currentTime;	15 animation.currentTime = currentTime;

16 var portion = currentTime / animation.effect.timing.duration;	16 var portion = currentTime / animation.effect.timing.duration;

17 assert_approx_equals(animation.effect.getComputedTiming().progress,	17 assert_approx_equals(animation.effect.getComputedTiming().progress,

18 easingFunction(portion),	18 easingFunction(portion),

19 0.01,	19 0.01,

20 'The progress of the animation should be approximately ' +	20 'The progress of the animation should be approximately ' +

21 easingFunction(portion) + ' at ' + currentTime + 'ms');	21 easingFunction(portion) + ' at ' + currentTime + 'ms');

22 }	22 }

23	23

24 gEffectEasingTests.forEach(function(options) {	24 gEasingTests.forEach(function(options) {

25 test(function(t) {	25 test(function(t) {

26 var target = createDiv(t);	26 var target = createDiv(t);

27 var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],	27 var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],

28 { duration: 1000 * MS_PER_SEC,	28 { duration: 1000 * MS_PER_SEC,

29 fill: 'forwards' });	29 fill: 'forwards' });

30 anim.effect.timing.easing = options.easing;	30 anim.effect.timing.easing = options.easing;

31 assert_equals(anim.effect.timing.easing,	31 assert_equals(anim.effect.timing.easing,

32 options.serialization \|\| options.easing);	32 options.serialization \|\| options.easing);

33	33

34 var easing = options.easingFunction;	34 var easing = options.easingFunction;

35 assert_progress(anim, 0, easing);	35 assert_progress(anim, 0, easing);

36 assert_progress(anim, 250 * MS_PER_SEC, easing);	36 assert_progress(anim, 250 * MS_PER_SEC, easing);

37 assert_progress(anim, 500 * MS_PER_SEC, easing);	37 assert_progress(anim, 500 * MS_PER_SEC, easing);

38 assert_progress(anim, 750 * MS_PER_SEC, easing);	38 assert_progress(anim, 750 * MS_PER_SEC, easing);

39 assert_progress(anim, 1000 * MS_PER_SEC, easing);	39 assert_progress(anim, 1000 * MS_PER_SEC, easing);

40 }, options.desc);	40 }, options.desc);

41 });	41 });

42	42

43 gInvalidEasingTests.forEach(function(options) {	43 gInvalidEasings.forEach(function(invalidEasing) {

44 test(function(t) {	44 test(function(t) {

45 var div = createDiv(t);	45 var div = createDiv(t);

46 var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);	46 var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);

47 assert_throws({ name: 'TypeError' },	47 assert_throws({ name: 'TypeError' },

48 function() {	48 function() {

49 anim.effect.timing.easing = options.easing;	49 anim.effect.timing.easing = invalidEasing;

50 });	50 });

51 }, 'Invalid effect easing value test: \'' + options.easing + '\'');	51 }, 'Invalid effect easing value test: \'' + invalidEasing + '\'');

52 });	52 });

53	53

54 test(function(t) {	54 test(function(t) {

55 var delay = 1000 * MS_PER_SEC;	55 var delay = 1000 * MS_PER_SEC;

56	56

57 var target = createDiv(t);	57 var target = createDiv(t);

58 var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],	58 var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],

59 { duration: 1000 * MS_PER_SEC,	59 { duration: 1000 * MS_PER_SEC,

60 fill: 'both',	60 fill: 'both',

61 delay: delay,	61 delay: delay,

(...skipping 12 matching lines...) Expand all Loading...
74 'easing replace to steps(2, start) at active phase');	74 'easing replace to steps(2, start) at active phase');

75	75

76 anim.currentTime = delay + 1500 * MS_PER_SEC;	76 anim.currentTime = delay + 1500 * MS_PER_SEC;

77 anim.effect.timing.easing = 'steps(2, end)';	77 anim.effect.timing.easing = 'steps(2, end)';

78 assert_equals(anim.effect.getComputedTiming().progress, 1,	78 assert_equals(anim.effect.getComputedTiming().progress, 1,

79 'easing replace to steps(2, end) again at after phase');	79 'easing replace to steps(2, end) again at after phase');

80 }, 'Change the easing while the animation is running');	80 }, 'Change the easing while the animation is running');

81	81

82 </script>	82 </script>

83 </body>	83 </body>

OLD	NEW