Bug 1248532 - Part 2: Add tests for step-start. r=birtles
authorDaisuke Akatsuka <daisuke@mozilla-japan.org>
Fri, 01 Apr 2016 14:01:55 +0900
changeset 291227 be1060e48a5a230334e3b0b1f757155fd64a17df
parent 291226 817264a13c52771c37fb3ab866ab47d680ec0c9d
child 291228 fe8bfb08d27387b0d584ee18b9ce6541a8e03884
push id19656
push usergwagner@mozilla.com
push dateMon, 04 Apr 2016 13:43:23 +0000
treeherderb2g-inbound@e99061fde28a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1248532
milestone48.0a1
Bug 1248532 - Part 2: Add tests for step-start. r=birtles MozReview-Commit-ID: CIFKnlIF2hk
layout/style/test/file_animations_effect_timing_duration.html
layout/style/test/test_transitions_step_functions.html
testing/web-platform/tests/web-animations/keyframe-effect/effect-easing.html
--- a/layout/style/test/file_animations_effect_timing_duration.html
+++ b/layout/style/test/file_animations_effect_timing_duration.html
@@ -44,16 +44,20 @@ addAsyncAnimTest(function *() {
     [ { transform: 'translate(0px)', easing: "steps(2, start)" },
       { transform: 'translate(100px)' } ], 4000);
   yield waitForPaints();
 
   advance_clock(500);
   omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor,
           "Animation is running on compositor");
   animation.effect.timing.duration = 2000;
+  // Setter of timing option should set up the changes to animations for the
+  // next layer transaction but it won't schedule a paint immediately so we need
+  // to tick the refresh driver before we can wait on the next paint.
+  advance_clock(0);
 
   yield waitForPaints();
   omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor,
           "Animation remains on compositor");
 
   advance_clock(1000);
   omta_is(div, "transform", { tx: 100 }, RunningOn.Compositor,
           "Animation is updated on compositor");
@@ -72,12 +76,11 @@ addAsyncAnimTest(function *() {
   animation.effect.timing.duration = 2000;
   advance_clock(0);
   yield waitForPaints();
   omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor,
           "Animation is running on compositor");
   done_div();
 })
 
-
 </script>
 </body>
 </html>
--- a/layout/style/test/test_transitions_step_functions.html
+++ b/layout/style/test/test_transitions_step_functions.html
@@ -42,17 +42,17 @@ function run_test(tf, percent, value)
   p.style.marginTop = "1000px";
   var result = px_to_num(cs.marginTop) / 1000
 
   is(result, value, 100 * percent + "% of the way through " + tf);
 
   display.removeChild(p);
 }
 
-run_test("step-start", 0, 0);
+run_test("step-start", 0, 1);
 run_test("step-start", 0.001, 1);
 run_test("step-start", 0.999, 1);
 run_test("step-start", 1, 1);
 run_test("step-end", 0, 0);
 run_test("step-end", 0.001, 0);
 run_test("step-end", 0.999, 0);
 run_test("step-end", 1, 1);
 
@@ -63,20 +63,20 @@ run_test("steps(2)", 0.99, 0.5);
 run_test("steps(2)", 1.00, 1.0);
 
 run_test("steps(2, end)", 0.00, 0.0);
 run_test("steps(2, end)", 0.49, 0.0);
 run_test("steps(2, end)", 0.50, 0.5);
 run_test("steps(2, end)", 0.99, 0.5);
 run_test("steps(2, end)", 1.00, 1.0);
 
-run_test("steps(2, start)", 0.00, 0.0);
-run_test("steps(2, start)", 0.01, 0.5);
-run_test("steps(2, start)", 0.50, 0.5);
-run_test("steps(2, start)", 0.51, 1.0);
+run_test("steps(2, start)", 0.00, 0.5);
+run_test("steps(2, start)", 0.49, 0.5);
+run_test("steps(2, start)", 0.50, 1.0);
+run_test("steps(2, start)", 0.99, 1.0);
 run_test("steps(2, start)", 1.00, 1.0);
 
 run_test("steps(8,end)", 0.00, 0.0);
 run_test("steps(8,end)", 0.10, 0.0);
 run_test("steps(8,end)", 0.20, 0.125);
 run_test("steps(8,end)", 0.30, 0.25);
 run_test("steps(8,end)", 0.40, 0.375);
 run_test("steps(8,end)", 0.49, 0.375);
--- a/testing/web-platform/tests/web-animations/keyframe-effect/effect-easing.html
+++ b/testing/web-platform/tests/web-animations/keyframe-effect/effect-easing.html
@@ -430,10 +430,245 @@ test(function(t) {
   });
   assert_style_left_at(anim, 1000, function(x) {
     return easing(easing(x))
   });
 }, 'effect easing which produces negative values and the tangent on ' +
    'the lower boundary is infinity with keyframe easing producing ' +
    'negative values');
 
+var gStepStartEasingTests = [
+  {
+    description: 'Test bounds point of step-start easing',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0 },
+                  { currentTime: 999,  progress: 0 },
+                  { currentTime: 1000, progress: 0.5 },
+                  { currentTime: 1499, progress: 0.5 },
+                  { currentTime: 1500, progress: 1 },
+                  { currentTime: 2000, progress: 1 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing with compositor',
+    keyframe:   [ { opacity: 0 },
+                  { opacity: 1 } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0 },
+                  { currentTime: 999,  progress: 0 },
+                  { currentTime: 1000, progress: 0.5 },
+                  { currentTime: 1499, progress: 0.5 },
+                  { currentTime: 1500, progress: 1 },
+                  { currentTime: 2000, progress: 1 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing with reverse direction',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  direction: 'reverse',
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1001, progress: 1 },
+                  { currentTime: 1500, progress: 1 },
+                  { currentTime: 1501, progress: 0.5 },
+                  { currentTime: 2000, progress: 0 },
+                  { currentTime: 2500, progress: 0 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing ' +
+                 'with iterationStart not at a transition point',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  iterationStart: 0.25,
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0.5 },
+                  { currentTime: 999,  progress: 0.5 },
+                  { currentTime: 1000, progress: 0.5 },
+                  { currentTime: 1249, progress: 0.5 },
+                  { currentTime: 1250, progress: 1 },
+                  { currentTime: 1749, progress: 1 },
+                  { currentTime: 1750, progress: 0.5 },
+                  { currentTime: 2000, progress: 0.5 },
+                  { currentTime: 2500, progress: 0.5 },
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing ' +
+                 'with iterationStart and delay',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  iterationStart: 0.5,
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0.5 },
+                  { currentTime: 999,  progress: 0.5 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1499, progress: 1 },
+                  { currentTime: 1500, progress: 0.5 },
+                  { currentTime: 2000, progress: 1 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing ' +
+                 'with iterationStart and reverse direction',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  iterationStart: 0.5,
+                  direction: 'reverse',
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1001, progress: 0.5 },
+                  { currentTime: 1499, progress: 0.5 },
+                  { currentTime: 1500, progress: 1 },
+                  { currentTime: 1999, progress: 1 },
+                  { currentTime: 2000, progress: 0.5 },
+                  { currentTime: 2500, progress: 0.5 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step(4, start) easing ' +
+                 'with iterationStart 0.75 and delay',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  duration: 1000,
+                  fill: 'both',
+                  delay: 1000,
+                  iterationStart: 0.75,
+                  easing: 'steps(4, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0.75 },
+                  { currentTime: 999,  progress: 0.75 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 2000, progress: 1 },
+                  { currentTime: 2500, progress: 1 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing ' +
+                 'with alternate direction',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  duration: 1000,
+                  fill: 'both',
+                  delay: 1000,
+                  iterations: 2,
+                  iterationStart: 1.5,
+                  direction: 'alternate',
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1001, progress: 0.5 },
+                  { currentTime: 2999, progress: 1 },
+                  { currentTime: 3000, progress: 0.5 },
+                  { currentTime: 3500, progress: 0.5 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing ' +
+                 'with alternate-reverse direction',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  duration: 1000,
+                  fill: 'both',
+                  delay: 1000,
+                  iterations: 2,
+                  iterationStart: 0.5,
+                  direction: 'alternate-reverse',
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1001, progress: 0.5 },
+                  { currentTime: 2999, progress: 1 },
+                  { currentTime: 3000, progress: 0.5 },
+                  { currentTime: 3500, progress: 0.5 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing in keyframe',
+    keyframe:   [ { width: '0px', easing: 'steps(2, start)' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0,     width: '0px' },
+                  { currentTime: 999,  progress: 0,     width: '0px' },
+                  { currentTime: 1000, progress: 0,     width: '50px' },
+                  { currentTime: 1499, progress: 0.499, width: '50px' },
+                  { currentTime: 1500, progress: 0.5,   width: '100px' },
+                  { currentTime: 2000, progress: 1,     width: '100px' },
+                  { currentTime: 2500, progress: 1,     width: '100px' }
+                ]
+  },
+]
+
+gStepStartEasingTests.forEach(function(options) {
+  test(function(t) {
+    var target = createDiv(t);
+    var animation = target.animate(options.keyframe, options.effect);
+    options.conditions.forEach(function(condition) {
+      animation.currentTime = condition.currentTime;
+      if (typeof condition.progress !== 'undefined') {
+        assert_equals(animation.effect.getComputedTiming().progress,
+                      condition.progress,
+                      'Progress at ' + animation.currentTime + 'ms');
+      }
+      if (typeof condition.width !== 'undefined') {
+        assert_equals(getComputedStyle(target).width,
+                      condition.width,
+                      'Progress at ' + animation.currentTime + 'ms');
+      }
+    });
+  }, options.description);
+});
+
 </script>
 </body>