Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(112)

Side by Side Diff: third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/animation-effect-timing/easing.html

Issue 1924663004: Import web-platform-tests@c969f975ca64b67ebcdddfefa0ef1d7d82680d88 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Add TestExpectations for web animations instead of skipping Created 4 years, 7 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
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <meta charset=utf-8>
3 <title>easing tests</title>
4 <link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffect timing-easing">
5 <script src="../../../../resources/testharness.js"></script>
6 <script src="../../../../resources/testharnessreport.js"></script>
7 <script src="../testcommon.js"></script>
8 <script src="../resources/effect-easing-tests.js"></script>
9 <body>
10 <div id="log"></div>
11 <script>
12 'use strict';
13
14 function assert_progress(animation, currentTime, easingFunction) {
15 animation.currentTime = currentTime;
16 var portion = currentTime / animation.effect.timing.duration;
17 assert_approx_equals(animation.effect.getComputedTiming().progress,
18 easingFunction(portion),
19 0.01,
20 'The progress of the animation should be approximately ' +
21 easingFunction(portion) + ' at ' + currentTime + 'ms');
22 }
23
24 gEffectEasingTests.forEach(function(options) {
25 test(function(t) {
26 var target = createDiv(t);
27 var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
28 { duration: 1000 * MS_PER_SEC,
29 fill: 'forwards' });
30 anim.effect.timing.easing = options.easing;
31 assert_equals(anim.effect.timing.easing, options.easing);
32
33 var easing = options.easingFunction;
34 assert_progress(anim, 0, easing);
35 assert_progress(anim, 250 * MS_PER_SEC, easing);
36 assert_progress(anim, 500 * MS_PER_SEC, easing);
37 assert_progress(anim, 750 * MS_PER_SEC, easing);
38 assert_progress(anim, 1000 * MS_PER_SEC, easing);
39 }, options.desc);
40 });
41
42 test(function(t) {
43 var div = createDiv(t);
44 var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
45 assert_throws({ name: 'TypeError' },
46 function() {
47 anim.effect.timing.easing = '';
48 });
49 assert_throws({ name: 'TypeError' },
50 function() {
51 anim.effect.timing.easing = 'test';
52 });
53 }, 'Test invalid easing value');
54
55 test(function(t) {
56 var delay = 1000 * MS_PER_SEC;
57
58 var target = createDiv(t);
59 var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
60 { duration: 1000 * MS_PER_SEC,
61 fill: 'both',
62 delay: delay,
63 easing: 'steps(2, start)' });
64
65 anim.effect.timing.easing = 'steps(2, end)';
66 assert_equals(anim.effect.getComputedTiming().progress, 0,
67 'easing replace to steps(2, end) at before phase');
68
69 anim.currentTime = delay + 750 * MS_PER_SEC;
70 assert_equals(anim.effect.getComputedTiming().progress, 0.5,
71 'change currentTime to active phase');
72
73 anim.effect.timing.easing = 'steps(2, start)';
74 assert_equals(anim.effect.getComputedTiming().progress, 1,
75 'easing replace to steps(2, start) at active phase');
76
77 anim.currentTime = delay + 1500 * MS_PER_SEC;
78 anim.effect.timing.easing = 'steps(2, end)';
79 assert_equals(anim.effect.getComputedTiming().progress, 1,
80 'easing replace to steps(2, end) again at after phase');
81 }, 'Change the easing while the animation is running');
82
83 </script>
84 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698