style: Implement steps(jump-*) functions.

1. Add a new preference, layout.css.step-position-jump.enabled, for
   step(_, jump-*) timing functions.
2. We still keep JumpEnd and End tags, even though there is no difference
   between them. Therefore, we could disable the preference if needed.
3. Update the calculation of StepTiming to match the algorithm in the spec.
4. For servo, we implement the correct step function algorithm except
   for the handling of before_flag. This could be fixed later.

Depends on D9313

Differential Revision: https://phabricator.services.mozilla.com/D9314

1 files changed, 33 insertions, 5 deletions

diff --git a/components/style/animation.rs b/components/style/animation.rs
index 311d102729f..057019950a4 100644
--- a/components/style/animation.rs
+++ b/components/style/animation.rs
@@ -363,11 +363,39 @@ impl PropertyAnimation {
             GenericTimingFunction::CubicBezier { x1, y1, x2, y2 } => {
                 Bezier::new(x1, y1, x2, y2).solve(time, epsilon)
             },
-            GenericTimingFunction::Steps(steps, StepPosition::Start) => {
-                (time * (steps as f64)).ceil() / (steps as f64)
-            },
-            GenericTimingFunction::Steps(steps, StepPosition::End) => {
-                (time * (steps as f64)).floor() / (steps as f64)
+            GenericTimingFunction::Steps(steps, pos) => {
+                let mut current_step = (time * (steps as f64)).floor() as i32;
+
+                if pos == StepPosition::Start ||
+                   pos == StepPosition::JumpStart ||
+                   pos == StepPosition::JumpBoth {
+                    current_step = current_step + 1;
+                }
+
+                // FIXME: We should update current_step according to the "before flag".
+                // In order to get the before flag, we have to know the current animation phase
+                // and whether the iteration is reversed. For now, we skip this calculation.
+                // (i.e. Treat before_flag is unset,)
+                // https://drafts.csswg.org/css-easing/#step-timing-function-algo
+
+                if time >= 0.0 && current_step < 0 {
+                    current_step = 0;
+                }
+
+                let jumps = match pos {
+                    StepPosition::JumpBoth => steps + 1,
+                    StepPosition::JumpNone => steps - 1,
+                    StepPosition::JumpStart |
+                    StepPosition::JumpEnd |
+                    StepPosition::Start |
+                    StepPosition::End => steps,
+                };
+
+                if time <= 1.0 && current_step > jumps {
+                    current_step = jumps;
+                }
+
+                (current_step as f64) / (jumps as f64)
             },
             GenericTimingFunction::Keyword(keyword) => {
                 let (x1, x2, y1, y2) = keyword.to_bezier();