LayoutTests/web-animations-api/w3c/3-keyframes-with-offsets.html - Issue 253963002: Web Animations API: Add layout tests for element.animate() keyframes

Side by Side Diff: LayoutTests/web-animations-api/w3c/3-keyframes-with-offsets.html

Issue 253963002: Web Animations API: Add layout tests for element.animate() keyframes (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Added comment Created 6 years, 5 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 | Annotate | Revision Log

« no previous file with comments | « LayoutTests/web-animations-api/w3c/2-keyframes-with-offsets.html ('k') | LayoutTests/web-animations-api/w3c/eased-keyframes.html » ('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 <script src="../../resources/testharness.js"></script>

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

	4 <script src="resources/keyframes-test.js"></script>

	5 <script>

	6 var keyframeA = {opacity: '0.5', left: '50px'};

	7 var keyframeB = {opacity: '0', left: '0px'};

	8 var keyframeC = {opacity: '0.75', left: '75px'};

	9

	10 var keyframeBExpectations = {

	11 0: {opacity: '0.5', left: '50px'},

	12 0.25: {opacity: '0.25', left: '25px'},

	13 0.5: {opacity: '0', left: '0px'}, // Corresponds to keyframeB (offset unspecif ied).

	14 0.75: {opacity: '0.375', left: '37.5px'},

	15 1: {opacity: '0.75', left: '75px'},

	16 };

	17

	18 var offsetKeyframeA = {opacity: keyframeA.opacity, left: keyframeA.left, offset: 0};

	19 var offsetKeyframeB = {opacity: keyframeB.opacity, left: keyframeB.left, offset: 0.25};

	20 var offsetKeyframeC = {opacity: keyframeC.opacity, left: keyframeC.left, offset: 1};

	21

	22 var offsetKeyframeBExpectations = {

	23 0: {opacity: '0.5', left: '50px'},

	24 0.125: {opacity: '0.25', left: '25px'},

	25 0.25: {opacity: '0', left: '0px'}, // Corresponds to offsetKeyframeB (offset 0 .25).

	26 0.5: {opacity: '0.25', left: '25px'},

	27 0.75: {opacity: '0.5', left: '50px'},

	28 1: {opacity: '0.75', left: '75px'},

	29 };

	30

	31 test(function() {

	32 assertAnimationStyles([

	33 offsetKeyframeA,

	34 keyframeB,

	35 keyframeC,

	36 ], keyframeBExpectations, 'with first offset specified');

	37 assertAnimationStyles([

	38 keyframeA,

	39 offsetKeyframeB,

	40 keyframeC,

	41 ], offsetKeyframeBExpectations, 'with second offset specified');

	42 assertAnimationStyles([

	43 keyframeA,

	44 keyframeB,

	45 offsetKeyframeC,

	46 ], keyframeBExpectations, 'with third offset specified');

	47 },

	48 'element.animate() with 3 keyframes and 1 offset specified',

	49 {

	50 help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',

	51 assert: [

	52 'element.animate() should start an animation when three keyframes',

	53 'are provided with matching properties and one offset specified.',

	54 'The keyframes must maintain their ordering and get distributed',

	55 'correctly.',

	56 ],

	57 author: 'Alan Cutter',

	58 });

	59

	60 test(function() {

	61 assertAnimationStyles([

	62 keyframeA,

	63 offsetKeyframeB,

	64 offsetKeyframeC,

	65 ], offsetKeyframeBExpectations, 'with first offset unspecified');

	66 assertAnimationStyles([

	67 offsetKeyframeA,

	68 keyframeB,

	69 offsetKeyframeC,

	70 ], keyframeBExpectations, 'with second offset unspecified');

	71 assertAnimationStyles([

	72 offsetKeyframeA,

	73 offsetKeyframeB,

	74 keyframeC,

	75 ], offsetKeyframeBExpectations, 'with third offset unspecified');

	76 },

	77 'element.animate() with 3 keyframes and 2 offsets specified',

	78 {

	79 help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',

	80 assert: [

	81 'element.animate() should start an animation when three keyframes',

	82 'are provided with matching properties and two offsets specified.',

	83 'The keyframes must maintain their ordering and get distributed',

	84 'correctly.',

	85 ],

	86 author: 'Alan Cutter',

	87 });

	88

	89 test(function() {

	90 assertAnimationStyles([

	91 offsetKeyframeA,

	92 offsetKeyframeB,

	93 offsetKeyframeC,

	94 ], offsetKeyframeBExpectations, 'with ordered offsets');

	95 assertAnimationStyles([

	96 offsetKeyframeA,

	97 offsetKeyframeC,

	98 offsetKeyframeB,

	99 ], offsetKeyframeBExpectations, 'with unordered offsets (1)');

	100 assertAnimationStyles([

	101 offsetKeyframeB,

	102 offsetKeyframeA,

	103 offsetKeyframeC,

	104 ], offsetKeyframeBExpectations, 'with unordered offsets (2)');

	105 assertAnimationStyles([

	106 offsetKeyframeB,

	107 offsetKeyframeC,

	108 offsetKeyframeA,

	109 ], offsetKeyframeBExpectations, 'with unordered offsets (3)');

	110 assertAnimationStyles([

	111 offsetKeyframeC,

	112 offsetKeyframeA,

	113 offsetKeyframeB,

	114 ], offsetKeyframeBExpectations, 'with unordered offsets (4)');

	115 assertAnimationStyles([

	116 offsetKeyframeC,

	117 offsetKeyframeB,

	118 offsetKeyframeA,

	119 ], offsetKeyframeBExpectations, 'with unordered offsets (5)');

	120 },

	121 'element.animate() with 3 keyframes and 3 offsets specified',

	122 {

	123 help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',

	124 assert: [

	125 'element.animate() should start an animation when three keyframes',

	126 'are provided with matching properties and all offsets specified.',

	127 'The keyframes must maintain their ordering and get distributed',

	128 'correctly.',

	129 ],

	130 author: 'Alan Cutter',

	131 });

	132 </script>

OLD	NEW