Bug 1244590 - Part 11: Test for different targets. draft
authorBoris Chiou <boris.chiou@gmail.com>
Thu, 19 May 2016 20:37:13 +0800
changeset 369286 e4ddd129d7ad7258c411918fee59d375e5f70698
parent 369285 5c6435df39f7b14f82c2bd623de20be9d65012bb
child 369287 da5e7ba24fce1c2c7c188db5dcf5c74451bc9876
push id18826
push userbmo:boris.chiou@gmail.com
push dateSat, 21 May 2016 11:25:24 +0000
bugs1244590
milestone49.0a1
Bug 1244590 - Part 11: Test for different targets. MozReview-Commit-ID: B0hrEKRdKEG
testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setTarget.html
--- a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html
+++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html
@@ -299,10 +299,25 @@ test(function(t) {
                 '2nd frame offset using distribute spacing');
   assert_equals(frames[3].computedOffset, 0.5 + 0.5 * 1 / 2,
                 '4th frame offset using distribute spacing because it is the ' +
                 'first paceable keyframe from a non-null offset keyframe');
 }, 'Test paced spacing only for keyframes specifying all some components, ' +
    'and falling back to distribute spacing for the reset with some specific ' +
    'offsets');
 
+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');
+
 </script>
 </body>
--- 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,70 @@ 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 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');
+
+// TODO: test when the style context changes things like font-size and
+// the dimension against which percentages are resolved.
+// e.g. when you have values for margin-left of 3em, 50%, 4em etc.
+
 </script>
 </body>