author | Boris Chiou <boris.chiou@gmail.com> |
Thu, 26 May 2016 17:42:23 +0800 | |
changeset 302867 | 981f75fa50d22efc58cbcc9a4ebb311f16410764 |
parent 302866 | 166e184b73cd3909406b69b4e7bbd97527a6a6ba |
child 302868 | 026d422063f878d637cbd6f938252c5c13db2763 |
push id | 30376 |
push user | cbook@mozilla.com |
push date | Tue, 28 Jun 2016 14:09:36 +0000 |
treeherder | mozilla-central@e45890951ce7 [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
reviewers | birtles |
bugs | 1244590 |
milestone | 50.0a1 |
first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setTarget.html | file | annotate | diff | comparison | revisions |
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setTarget.html +++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setTarget.html @@ -80,10 +80,81 @@ test(function(t) { // This makes sure the animation property is changed correctly on new // targeted element. anim.currentTime = 75 * MS_PER_SEC; assert_equals(getComputedStyle(b).marginLeft, '75px', 'Value of 2nd target (currently targeted) after ' + 'changing the animation current time.'); }, 'Test setting target from a valid target to another target'); +test(function(t) { + var anim = createDiv(t).animate([ { marginLeft: '0px' }, + { marginLeft: '-20px' }, + { marginLeft: '100px' }, + { marginLeft: '50px' } ], + { duration: 100 * MS_PER_SEC, + spacing: 'paced(margin-left)' }); + + anim.effect.target = null; + + var frames = anim.effect.getKeyframes(); + var slots = frames.length - 1; + assert_equals(frames[0].computedOffset, 0.0, '1st frame offset'); + assert_equals(frames[1].computedOffset, 1.0 / slots, '2nd frame offset'); + assert_equals(frames[2].computedOffset, 2.0 / slots, '3rd frame offset'); + assert_equals(frames[3].computedOffset, 1.0, 'last frame offset'); +}, 'Test falling back to distribute spacing mode after setting null target'); + +test(function(t) { + var effect = new KeyframeEffect(null, + [ { marginLeft: '0px' }, + { marginLeft: '-20px' }, + { marginLeft: '100px' }, + { marginLeft: '50px' } ], + { duration: 100 * MS_PER_SEC, + spacing: 'paced(margin-left)' }); + var frames = effect.getKeyframes(); + var slots = frames.length - 1; + assert_equals(frames[1].computedOffset, 1.0 / slots, '2nd frame offset'); + assert_equals(frames[2].computedOffset, 2.0 / slots, '3rd frame offset'); +}, 'Test falling back to distribute spacing mode if there is no context ' + + 'element'); + +test(function(t) { + var div1 = createDiv(t); + var div2 = createDiv(t); + div1.style.marginLeft = '-20px'; + div2.style.marginLeft = '-50px'; + var child1 = document.createElement('div'); + var child2 = document.createElement('div'); + div1.appendChild(child1); + div2.appendChild(child2); + // body + // / \ + // div1 div2 + // (-20px) (-50px) + // | | + // child1 child2 + var anim = child1.animate([ { marginLeft: '0px' }, + { marginLeft: 'inherit' }, + { marginLeft: '100px' }, + { marginLeft: '50px' } ], + { duration: 100 * MS_PER_SEC, + spacing: 'paced(margin-left)' }); + + var frames = anim.effect.getKeyframes(); + var cumDist = [0, 20, 140, 190]; + assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3], + '2nd frame offset'); + assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3], + '3rd frame offset'); + + anim.effect.target = child2; + frames = anim.effect.getKeyframes(); + cumDist = [0, 50, 200, 250]; + assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3], + '2nd frame offset after setting a new target'); + assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3], + '3rd frame offset after setting a new target'); +}, 'Test paced spacing mode after setting a new target'); + </script> </body>