LayoutTests/web-animations-api/element-animate-list-of-keyframes.html - Issue 251463003: Web Animations API: Sort keyframes by offset

Side by Side Diff: LayoutTests/web-animations-api/element-animate-list-of-keyframes.html

Issue 251463003: Web Animations API: Sort keyframes by offset (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Detect null offset Created 6 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

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

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

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

4	4

5 <style>	5 <style>

6 .anim {	6 .anim {

7 position: absolute;	7 position: absolute;

8 left: 10px;	8 left: 10px;

9 height: 90px;	9 height: 90px;

10 width: 100px;	10 width: 100px;

(...skipping 32 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
43 test(function() {	43 test(function() {

44 var player = e2.animate([	44 var player = e2.animate([

45 {backgroundColor: 'green', offset: 0},	45 {backgroundColor: 'green', offset: 0},

46 {backgroundColor: 'purple', offset: 1}	46 {backgroundColor: 'purple', offset: 1}

47 ], durationValue);	47 ], durationValue);

48 player.pause();	48 player.pause();

49 player.currentTime = durationValue / 2;	49 player.currentTime = durationValue / 2;

50 assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)');	50 assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)');

51 }, 'Calling animate() should start an animation. CamelCase property names should be parsed.');	51 }, 'Calling animate() should start an animation. CamelCase property names should be parsed.');

52	52

	53 test(function() {

	54 var player = e1.animate([

	55 {left: '10px', offset: '0'},

	56 {left: '100px', offset: '1'}

	57 ], durationValue);

	58 player.pause();

	59 player.currentTime = durationValue / 2;

	60 assert_equals(e1Style.left, '55px');

	61 }, 'Offsets may be specified as strings.');

	62

	63 test(function() {

	64 var player = e1.animate([

	65 {opacity: '0.5', offset: 0.5},

	66 {opacity: '0.9', offset: 1},

	67 {opacity: '0', offset: 0}

	68 ], durationValue);

	69 player.pause();

	70 player.currentTime = durationValue / 4;

	71 assert_equals(e1Style.opacity, '0.25');

	72 }, 'Keyframes with offsets should become sorted by offset.');

	73

	74 test(function() {

	75 var player = e1.animate([

	76 {opacity: '1', offset: -1},

	77 {opacity: '1', offset: NaN},

	78 {opacity: '1', offset: 2},

	79 {opacity: '0.5', offset: 1},

	80 {opacity: '0', offset: 0}

	81 ], durationValue);

	82 player.pause();

	83 player.currentTime = durationValue / 2;
	alancutter (OOO until 2018) 2014/04/29 07:58:44 This should probably check that the keyframes get This should probably check that the keyframes get sorted and test durationValue / 4 instead of durationValue / 2.
	84 assert_equals(e1Style.opacity, '0.25');

	85 }, 'Keyframes with offsets outside the range [0.0, 1.0] are ignored.');

	86

	87 test(function() {

	88 var keyframes = [

	89 {opacity: '0.5'},

	90 {opacity: '1', offset: 1},

	91 {opacity: '0', offset: 0}

	92 ];

	93 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });

	94 }, 'Should throw when keyframes are not loosely sorted and any have no offset.') ;

	95

	96 test(function() {

	97 var keyframes = [

	98 {opacity: '0.5', offset: null},

	99 {opacity: '1', offset: 1},

	100 {opacity: '0', offset: 0}

	101 ];

	102 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });

	103 }, 'Should throw when keyframes are not loosely sorted and any have null offset. ');

	104

53 var keyframesWithInvalid = [	105 var keyframesWithInvalid = [

54 {width: '0px', backgroundColor: 'octarine', offset: 0},	106 {width: '0px', backgroundColor: 'octarine', offset: 0},

55 {width: '1000px', foo: 'bar', offset: 1}];	107 {width: '1000px', foo: 'bar', offset: 1}];

56	108

57 test(function() {	109 test(function() {

58 var player = e3.animate(keyframesWithInvalid, {duration: durationValue, fill : 'forwards'});	110 var player = e3.animate(keyframesWithInvalid, {duration: durationValue, fill : 'forwards'});

59 player.pause();	111 player.pause();

60 player.currentTime = durationValue;	112 player.currentTime = durationValue;

61 assert_equals(e3Style.width, '1000px');	113 assert_equals(e3Style.width, '1000px');

62 assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)');	114 assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)');

63 assert_equals(e3Style.foo, undefined);	115 assert_equals(e3Style.foo, undefined);

64 }, 'Calling animate() with a pre-constructed keyframes list should start an anim ation. Invalid style declarations should be ignored.');	116 }, 'Calling animate() with a pre-constructed keyframes list should start an anim ation. Invalid style declarations should be ignored.');

65 </script>	117 </script>

OLD	NEW

« no previous file with comments | « no previous file | Source/core/animation/EffectInput.cpp » ('j') | Source/core/animation/EffectInput.cpp » ('J')