third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/animation-effect-timing/easing.html - Issue 1924663004: Import web-platform-tests@c969f975ca64b67ebcdddfefa0ef1d7d82680d88

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: 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

« third_party/WebKit/LayoutTests/W3CImportExpectations ('K') | « third_party/WebKit/LayoutTests/imported/web-platform-tests/shadow-dom/Document-prototype-importNode.html ('k') | third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/animation-effect-timing/easing-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>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>

OLD	NEW