Fix serialization of step timing functions

The CSS Transitions specification recently added a section specifying how timing
functions should be serialized:
https://hg.csswg.org/drafts/rev/12d32649a91f
https://drafts.csswg.org/css-transitions/#serializing-a-timing-function

This patch changes how step timing functions are serialized in order to bring it
in line with the spec. The corresponding parsing function devtools/front_end is
also updated.

The removal of "step-middle" and "steps(x, middle)" as valid values is deferred
until frames() is implemented (see crbug.com/646265).

BUG=631875,600248

Review-Url: https://codereview.chromium.org/2330283004
Cr-Commit-Position: refs/heads/master@{#418704}

third_party/WebKit/LayoutTests/imported/wpt/web-animations/interfaces/AnimationEffectTiming/easing-expected.txt

-This is a testharness.js-based test.
-FAIL step-start function assert_equals: expected "steps(1, start)" but got "step-start"
-FAIL steps(1, start) function assert_equals: expected "steps(1, start)" but got "step-start"
-PASS steps(2, start) function 
-FAIL step-end function assert_equals: expected "steps(1)" but got "step-end"
-FAIL steps(1) function assert_equals: expected "steps(1)" but got "step-end"
-FAIL steps(1, end) function assert_equals: expected "steps(1)" but got "step-end"
-FAIL steps(2, end) function assert_equals: expected "steps(2)" but got "steps(2, end)"
-PASS linear function 
-PASS ease function 
-PASS ease-in function 
-PASS ease-in-out function 
-PASS ease-out function 
-PASS easing function which produces values greater than 1 
-PASS Invalid effect easing value test: '' 
-PASS Invalid effect easing value test: 'test' 
-PASS Invalid effect easing value test: 'cubic-bezier(1.1, 0, 1, 1)' 
-PASS Invalid effect easing value test: 'cubic-bezier(0, 0, 1.1, 1)' 
-PASS Invalid effect easing value test: 'cubic-bezier(-0.1, 0, 1, 1)' 
-PASS Invalid effect easing value test: 'cubic-bezier(0, 0, -0.1, 1)' 
-PASS Invalid effect easing value test: 'steps(-1, start)' 
-PASS Invalid effect easing value test: 'steps(0.1, start)' 
-PASS Change the easing while the animation is running 
-Harness: the test ran to completion.
-

third_party/WebKit/LayoutTests/web-animations-api/animation-effect-timing-easing.html

@@ -31,18 +31,18 @@ test(function() {
   assert_animate_with_easing_roundtrips('ease-in');
   assert_animate_with_easing_roundtrips('ease-out');
   assert_animate_with_easing_roundtrips('ease-in-out');
-  assert_animate_with_easing_roundtrips('step-start');
-  assert_animate_with_easing_roundtrips('step-middle');
-  assert_animate_with_easing_roundtrips('step-end');
-  assert_animate_with_easing_roundtrips('steps(3, start)');
-  assert_animate_with_easing_roundtrips('steps(3, middle)');
-  assert_animate_with_easing_roundtrips('steps(3, end)');
   assert_animate_with_easing_roundtrips('cubic-bezier(0.1, 5, 0.23, 0)');
-}, 'Valid easing functions should come out the same as they went in');
+}, 'Valid linear and cubic-bezier easing functions should come out the same as they went in');
 
 test(function() {
-  assert_animate_with_easing_succeeds('steps(3)', 'steps(3, end)');
-}, 'steps easing second parameter defaults to end');
+  assert_animate_with_easing_succeeds('step-start', 'steps(1, start)');
+  assert_animate_with_easing_succeeds('step-middle', 'steps(1, middle)');
+  assert_animate_with_easing_succeeds('step-end', 'steps(1)');
+  assert_animate_with_easing_succeeds('steps(3, start)', 'steps(3, start)');
+  assert_animate_with_easing_succeeds('steps(3, middle)', 'steps(3, middle)');
+  assert_animate_with_easing_succeeds('steps(3, end)', 'steps(3)');
+  assert_animate_with_easing_succeeds('steps(3)', 'steps(3)');
+}, 'Valid step-function easings serialize as steps(<int>) or steps(<int>, start)');
 
 test(function() {
   assert_animate_with_easing_succeeds('eAse\\2d iN-ouT', 'ease-in-out');

third_party/WebKit/Source/core/animation/AnimationInputHelpersTest.cpp

@@ -96,15 +96,15 @@ TEST_F(AnimationAnimationInputHelpersTest, ParseAnimationTimingFunction)
     timingFunctionRoundTrips("ease-in", exceptionState);
     timingFunctionRoundTrips("ease-out", exceptionState);
     timingFunctionRoundTrips("ease-in-out", exceptionState);
-    timingFunctionRoundTrips("step-start", exceptionState);
-    timingFunctionRoundTrips("step-middle", exceptionState);
-    timingFunctionRoundTrips("step-end", exceptionState);
-    timingFunctionRoundTrips("steps(3, start)", exceptionState);
-    timingFunctionRoundTrips("steps(3, middle)", exceptionState);
-    timingFunctionRoundTrips("steps(3, end)", exceptionState);
     timingFunctionRoundTrips("cubic-bezier(0.1, 5, 0.23, 0)", exceptionState);
 
-    EXPECT_EQ("steps(3, end)", parseTimingFunction("steps(3)", exceptionState)->toString());
+    EXPECT_EQ("steps(1, start)", parseTimingFunction("step-start", exceptionState)->toString());
+    EXPECT_EQ("steps(1, middle)", parseTimingFunction("step-middle", exceptionState)->toString());
+    EXPECT_EQ("steps(1)", parseTimingFunction("step-end", exceptionState)->toString());
+    EXPECT_EQ("steps(3, start)", parseTimingFunction("steps(3, start)", exceptionState)->toString());
+    EXPECT_EQ("steps(3, middle)", parseTimingFunction("steps(3, middle)", exceptionState)->toString());
+    EXPECT_EQ("steps(3)", parseTimingFunction("steps(3, end)", exceptionState)->toString());
+    EXPECT_EQ("steps(3)", parseTimingFunction("steps(3)", exceptionState)->toString());
 
     timingFunctionThrows("steps(3, nowhere)", exceptionState);
     timingFunctionThrows("steps(-3, end)", exceptionState);

third_party/WebKit/Source/core/animation/KeyframeEffectTest.cpp

@@ -129,7 +129,7 @@ TEST_F(AnimationKeyframeEffectV8Test, SpecifiedGetters)
     setV8ObjectPropertyAsNumber(scope.isolate(), timingInput, "iterationStart", 2);
     setV8ObjectPropertyAsNumber(scope.isolate(), timingInput, "iterations", 10);
     setV8ObjectPropertyAsString(scope.isolate(), timingInput, "direction", "reverse");
-    setV8ObjectPropertyAsString(scope.isolate(), timingInput, "easing", "step-start");
+    setV8ObjectPropertyAsString(scope.isolate(), timingInput, "easing", "ease-in-out");
     KeyframeEffectOptions timingInputDictionary;
     TrackExceptionState exceptionState;
     V8KeyframeEffectOptions::toImpl(scope.isolate(), timingInput, timingInputDictionary, exceptionState);
@@ -144,7 +144,7 @@ TEST_F(AnimationKeyframeEffectV8Test, SpecifiedGetters)
     EXPECT_EQ(2, specified->iterationStart());
     EXPECT_EQ(10, specified->iterations());
     EXPECT_EQ("reverse", specified->direction());
-    EXPECT_EQ("step-start", specified->easing());
+    EXPECT_EQ("ease-in-out", specified->easing());
 }
 
 TEST_F(AnimationKeyframeEffectV8Test, SpecifiedDurationGetter)
@@ -228,9 +228,9 @@ TEST_F(AnimationKeyframeEffectV8Test, SpecifiedSetters)
     EXPECT_EQ("reverse", specified->direction());
 
     EXPECT_EQ("linear", specified->easing());
-    specified->setEasing("step-start", exceptionState);
+    specified->setEasing("ease-in-out", exceptionState);
     ASSERT_FALSE(exceptionState.hadException());
-    EXPECT_EQ("step-start", specified->easing());
+    EXPECT_EQ("ease-in-out", specified->easing());
 }
 
 TEST_F(AnimationKeyframeEffectV8Test, SetSpecifiedDuration)

third_party/WebKit/Source/devtools/front_end/animation/AnimationTimeline.js

@@ -762,11 +762,11 @@ WebInspector.AnimationTimeline.StepTimingFunction = function(steps, stepAtPositi
  * @return {?WebInspector.AnimationTimeline.StepTimingFunction}
  */
 WebInspector.AnimationTimeline.StepTimingFunction.parse = function(text) {
-    var match = text.match(/^step-(start|middle|end)$/);
-    if (match)
-        return new WebInspector.AnimationTimeline.StepTimingFunction(1, match[1]);
-    match = text.match(/^steps\((\d+), (start|middle|end)\)$/);
+    var match = text.match(/^steps\((\d+), (start|middle)\)$/);
     if (match)
         return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(match[1], 10), match[2]);
+    match = text.match(/^steps\((\d+)\)$/);
+    if (match)
+        return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(match[1], 10), "end");
     return null;
 }

third_party/WebKit/Source/platform/animation/TimingFunction.cpp

@@ -86,21 +86,18 @@ String StepsTimingFunction::toString() const
         positionString = "middle";
         break;
     case StepPosition::END:
-        positionString = "end";
+        // do not specify step position in output
         break;
     }
 
     StringBuilder builder;
-    if (this->numberOfSteps() == 1) {
-        builder.append("step-");
-        builder.append(positionString);
-    } else {
-        builder.append("steps(");
-        builder.append(String::numberToStringECMAScript(this->numberOfSteps()));
+    builder.append("steps(");
+    builder.append(String::numberToStringECMAScript(this->numberOfSteps()));
+    if (positionString) {
         builder.append(", ");
         builder.append(positionString);
-        builder.append(')');
     }
+    builder.append(')');
     return builder.toString();
 }
 

third_party/WebKit/Source/platform/animation/TimingFunctionTest.cpp

@@ -89,13 +89,13 @@ TEST_F(TimingFunctionTest, CubicToString)
 TEST_F(TimingFunctionTest, StepToString)
 {
     RefPtr<TimingFunction> stepTimingStart = StepsTimingFunction::preset(StepsTimingFunction::StepPosition::START);
-    EXPECT_EQ("step-start", stepTimingStart->toString());
+    EXPECT_EQ("steps(1, start)", stepTimingStart->toString());
 
     RefPtr<TimingFunction> stepTimingMiddle = StepsTimingFunction::preset(StepsTimingFunction::StepPosition::MIDDLE);
-    EXPECT_EQ("step-middle", stepTimingMiddle->toString());
+    EXPECT_EQ("steps(1, middle)", stepTimingMiddle->toString());
 
     RefPtr<TimingFunction> stepTimingEnd = StepsTimingFunction::preset(StepsTimingFunction::StepPosition::END);
-    EXPECT_EQ("step-end", stepTimingEnd->toString());
+    EXPECT_EQ("steps(1)", stepTimingEnd->toString());
 
     RefPtr<TimingFunction> stepTimingCustomStart = StepsTimingFunction::create(3, StepsTimingFunction::StepPosition::START);
     EXPECT_EQ("steps(3, start)", stepTimingCustomStart->toString());
@@ -104,7 +104,7 @@ TEST_F(TimingFunctionTest, StepToString)
     EXPECT_EQ("steps(4, middle)", stepTimingCustomMiddle->toString());
 
     RefPtr<TimingFunction> stepTimingCustomEnd = StepsTimingFunction::create(5, StepsTimingFunction::StepPosition::END);
-    EXPECT_EQ("steps(5, end)", stepTimingCustomEnd->toString());
+    EXPECT_EQ("steps(5)", stepTimingCustomEnd->toString());
 }
 
 TEST_F(TimingFunctionTest, BaseOperatorEq)