Bug 1244590 - Part 11: Test for different targets. r=birtles
authorBoris Chiou <boris.chiou@gmail.com>
Thu, 26 May 2016 17:42:23 +0800
changeset 302867 981f75fa50d22efc58cbcc9a4ebb311f16410764
parent 302866 166e184b73cd3909406b69b4e7bbd97527a6a6ba
child 302868 026d422063f878d637cbd6f938252c5c13db2763
push id30376
push usercbook@mozilla.com
push dateTue, 28 Jun 2016 14:09:36 +0000
treeherdermozilla-central@e45890951ce7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1244590
milestone50.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
Bug 1244590 - Part 11: Test for different targets. r=birtles MozReview-Commit-ID: B0hrEKRdKEG
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setTarget.html
--- 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>