third_party/WebKit/LayoutTests/imported/wpt/web-animations/interfaces/KeyframeEffect/setTarget.html - Issue 2143653006: Import wpt@c875b4212a473363afe8c09f012edf201386cb5b

Side by Side Diff: third_party/WebKit/LayoutTests/imported/wpt/web-animations/interfaces/KeyframeEffect/setTarget.html

Issue 2143653006: Import wpt@c875b4212a473363afe8c09f012edf201386cb5b (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Update W3CImportExpectations Created 4 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

« no previous file with comments | « third_party/WebKit/LayoutTests/imported/wpt/web-animations/interfaces/DocumentTimeline/constructor-expected.txt ('k') | third_party/WebKit/LayoutTests/imported/wpt/web-animations/interfaces/KeyframeEffect/setTarget-expected.txt » ('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>Writable effect.target tests</title>	3 <title>Writable effect.target tests</title>

4 <link rel="help"	4 <link rel="help"

5 href="https://w3c.github.io/web-animations/#dom-keyframeeffect-target">	5 href="https://w3c.github.io/web-animations/#dom-keyframeeffect-target">

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

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

8 <script src="../../testcommon.js"></script>	8 <script src="../../testcommon.js"></script>

9 <body>	9 <body>

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

(...skipping 67 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
78 'changing the effect target');	78 'changing the effect target');

79	79

80 // This makes sure the animation property is changed correctly on new	80 // This makes sure the animation property is changed correctly on new

81 // targeted element.	81 // targeted element.

82 anim.currentTime = 75 * MS_PER_SEC;	82 anim.currentTime = 75 * MS_PER_SEC;

83 assert_equals(getComputedStyle(b).marginLeft, '75px',	83 assert_equals(getComputedStyle(b).marginLeft, '75px',

84 'Value of 2nd target (currently targeted) after ' +	84 'Value of 2nd target (currently targeted) after ' +

85 'changing the animation current time.');	85 'changing the animation current time.');

86 }, 'Test setting target from a valid target to another target');	86 }, 'Test setting target from a valid target to another target');

87	87

	88 test(function(t) {

	89 var anim = createDiv(t).animate([ { marginLeft: '0px' },

	90 { marginLeft: '-20px' },

	91 { marginLeft: '100px' },

	92 { marginLeft: '50px' } ],

	93 { duration: 100 * MS_PER_SEC,

	94 spacing: 'paced(margin-left)' });

	95

	96 anim.effect.target = null;

	97

	98 var frames = anim.effect.getKeyframes();

	99 var slots = frames.length - 1;

	100 assert_equals(frames[0].computedOffset, 0.0, '1st frame offset');

	101 assert_equals(frames[1].computedOffset, 1.0 / slots, '2nd frame offset');

	102 assert_equals(frames[2].computedOffset, 2.0 / slots, '3rd frame offset');

	103 assert_equals(frames[3].computedOffset, 1.0, 'last frame offset');

	104 }, 'Test falling back to distribute spacing mode after setting null target');

	105

	106 test(function(t) {

	107 var effect = new KeyframeEffect(null,

	108 [ { marginLeft: '0px' },

	109 { marginLeft: '-20px' },

	110 { marginLeft: '100px' },

	111 { marginLeft: '50px' } ],

	112 { duration: 100 * MS_PER_SEC,

	113 spacing: 'paced(margin-left)' });

	114 var frames = effect.getKeyframes();

	115 var slots = frames.length - 1;

	116 assert_equals(frames[1].computedOffset, 1.0 / slots, '2nd frame offset');

	117 assert_equals(frames[2].computedOffset, 2.0 / slots, '3rd frame offset');

	118 }, 'Test falling back to distribute spacing mode if there is no context ' +

	119 'element');

	120

	121 test(function(t) {

	122 var div1 = createDiv(t);

	123 var div2 = createDiv(t);

	124 div1.style.marginLeft = '-20px';

	125 div2.style.marginLeft = '-50px';

	126 var child1 = document.createElement('div');

	127 var child2 = document.createElement('div');

	128 div1.appendChild(child1);

	129 div2.appendChild(child2);

	130 // body

	131 // / \

	132 // div1 div2

	133 // (-20px) (-50px)

	134 // \| \|

	135 // child1 child2

	136 var anim = child1.animate([ { marginLeft: '0px' },

	137 { marginLeft: 'inherit' },

	138 { marginLeft: '100px' },

	139 { marginLeft: '50px' } ],

	140 { duration: 100 * MS_PER_SEC,

	141 spacing: 'paced(margin-left)' });

	142

	143 var frames = anim.effect.getKeyframes();

	144 var cumDist = [0, 20, 140, 190];

	145 assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],

	146 '2nd frame offset');

	147 assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],

	148 '3rd frame offset');

	149

	150 anim.effect.target = child2;

	151 frames = anim.effect.getKeyframes();

	152 cumDist = [0, 50, 200, 250];

	153 assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],

	154 '2nd frame offset after setting a new target');

	155 assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],

	156 '3rd frame offset after setting a new target');

	157 }, 'Test paced spacing mode after setting a new target');

	158

88 </script>	159 </script>

89 </body>	160 </body>

OLD	NEW