Bug 1264865 - Part 1: steps(3, end) should serialize using the shorter steps(3) syntax. r=birtles

MozReview-Commit-ID: HBukw3qjyrr

--HG--
extra : rebase_source : 53bdcefc66cffa92c438bb3be794e6537533461c

dom/animation/test/css-animations/file_keyframeeffect-getkeyframes.html

@@ -171,16 +171,12 @@ const kTimingFunctionValues = [
   "ease-in",
   "ease-out",
   "ease-in-out",
-  "step-start",
   "steps(1, start)",
   "steps(2, start)",
-  "step-end",
   "steps(1)",
-  "steps(1, end)",
   "steps(2)",
-  "steps(2, end)",
   "cubic-bezier(0, 0, 1, 1)",
-  "cubic-bezier(0, 0.25, 0.75, 1)",
+  "cubic-bezier(0, 0.25, 0.75, 1)"
 ];
 
 test(function(t) {
@@ -256,7 +252,7 @@ test(function(t) {
                 "value of 'easing' on ComputedKeyframe #0");
   assert_equals(frames[1].easing, "ease-in-out",
                 "value of 'easing' on ComputedKeyframe #1");
-  assert_equals(frames[2].easing, "step-end",
+  assert_equals(frames[2].easing, "steps(1)",
                 "value of 'easing' on ComputedKeyframe #2");
 }, 'KeyframeEffectReadOnly.getKeyframes() returns frames with expected easing'
    + ' values, when the easing is specified on each keyframe');
@@ -270,9 +266,9 @@ test(function(t) {
   assert_equals(frames.length, 3, "number of frames");
   assert_equals(frames[0].easing, "linear",
                 "value of 'easing' on ComputedKeyframe #0");
-  assert_equals(frames[1].easing, "step-start",
+  assert_equals(frames[1].easing, "steps(1, start)",
                 "value of 'easing' on ComputedKeyframe #1");
-  assert_equals(frames[2].easing, "step-start",
+  assert_equals(frames[2].easing, "steps(1, start)",
                 "value of 'easing' on ComputedKeyframe #2");
 }, 'KeyframeEffectReadOnly.getKeyframes() returns frames with expected easing'
    + ' values, when the easing is specified on some keyframes');
@@ -428,7 +424,7 @@ test(function(t) {
   var expected = [
     { offset: 0, computedOffset: 0, easing: "linear",
       color: "rgb(0, 0, 0)", marginTop: "8px" },
-    { offset: 0.25, computedOffset: 0.25, easing: "step-end",
+    { offset: 0.25, computedOffset: 0.25, easing: "steps(1)",
       color: "rgb(0, 0, 255)" },
     { offset: 0.75, computedOffset: 0.75, easing: "ease-in",
       marginTop: "12px" },
@@ -474,7 +470,7 @@ test(function(t) {
   assert_equals(frames.length, 3, "number of frames");
 
   var expected = [
-    { offset: 0, computedOffset: 0, easing: "step-end",
+    { offset: 0, computedOffset: 0, easing: "steps(1)",
       color: "rgb(0, 0, 0)", fontSize: "16px" },
     { offset: 0, computedOffset: 0, easing: "linear",
       marginTop: "8px", paddingLeft: "2px" },
@@ -499,13 +495,13 @@ test(function(t) {
   assert_equals(frames.length, 5, "number of frames");
 
   var expected = [
-    { offset: 0, computedOffset: 0, easing: "steps(1, end)",
+    { offset: 0, computedOffset: 0, easing: "steps(1)",
       marginTop: "0px" },
-    { offset: 0, computedOffset: 0, easing: "step-end",
+    { offset: 0, computedOffset: 0, easing: "steps(1)",
       marginRight: "0px" },
     { offset: 0, computedOffset: 0, easing: "steps(1)",
       marginBottom: "0px" },
-    { offset: 0.5, computedOffset: 0.5, easing: "step-end",
+    { offset: 0.5, computedOffset: 0.5, easing: "steps(1)",
       marginTop: "10px", marginRight: "10px", marginBottom: "10px" },
     { offset: 1, computedOffset: 1, easing: "ease",
       marginTop: "20px", marginRight: "20px", marginBottom: "20px" },

dom/animation/test/css-transitions/file_keyframeeffect-getkeyframes.html

@@ -59,7 +59,7 @@ test(function(t) {
   assert_equals(frames.length, 2, "number of frames");
 
   var expected = [
-    { offset: 0, computedOffset: 0, easing: "steps(2, end)", left: "0px" },
+    { offset: 0, computedOffset: 0, easing: "steps(2)", left: "0px" },
     { offset: 1, computedOffset: 1, easing: "linear", left: "100px" },
   ];
 

layout/style/nsStyleUtil.cpp

@@ -599,30 +599,12 @@ nsStyleUtil::AppendStepsTimingFunction(nsTimingFunction::Type aType,
   MOZ_ASSERT(aType == nsTimingFunction::Type::StepStart ||
              aType == nsTimingFunction::Type::StepEnd);
 
-  if (aSyntax == nsTimingFunction::StepSyntax::Keyword) {
-    if (aType == nsTimingFunction::Type::StepStart) {
-      aResult.AppendLiteral("step-start");
-    } else {
-      aResult.AppendLiteral("step-end");
-    }
-    return;
-  }
-
   aResult.AppendLiteral("steps(");
   aResult.AppendInt(aSteps);
-  switch (aSyntax) {
-    case nsTimingFunction::StepSyntax::Keyword:
-      // handled above
-      break;
-    case nsTimingFunction::StepSyntax::FunctionalWithStartKeyword:
-      aResult.AppendLiteral(", start)");
-      break;
-    case nsTimingFunction::StepSyntax::FunctionalWithEndKeyword:
-      aResult.AppendLiteral(", end)");
-      break;
-    case nsTimingFunction::StepSyntax::FunctionalWithoutKeyword:
-      aResult.Append(')');
-      break;
+  if (aType == nsTimingFunction::Type::StepStart) {
+    aResult.AppendLiteral(", start)");
+  } else {
+    aResult.AppendLiteral(")");
   }
 }
 

testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html

@@ -28,7 +28,7 @@ gEffectEasingTests.forEach(function(options) {
                               { duration: 1000 * MS_PER_SEC,
                                 fill: 'forwards' });
     anim.effect.timing.easing = options.easing;
-    assert_equals(anim.effect.timing.easing, options.easing);
+    assert_equals(anim.effect.timing.easing, options.serialization || options.easing);
 
     var easing = options.easingFunction;
     assert_progress(anim, 0, easing);

testing/web-platform/tests/web-animations/resources/effect-easing-tests.js

@@ -1,13 +1,42 @@
 var gEffectEasingTests = [
   {
-    desc: 'steps(start) function',
+    desc: 'step-start function',
+    easing: 'step-start',
+    easingFunction: stepStart(1),
+    serialization: 'steps(1, start)'
+  },
+  {
+    desc: 'steps(1, start) function',
+    easing: 'steps(1, start)',
+    easingFunction: stepStart(1)
+  },
+  {
+    desc: 'steps(2, start) function',
     easing: 'steps(2, start)',
     easingFunction: stepStart(2)
   },
   {
-    desc: 'steps(end) function',
+    desc: 'step-end function',
+    easing: 'step-end',
+    easingFunction: stepEnd(1),
+    serialization: 'steps(1)'
+  },
+  {
+    desc: 'steps(1) function',
+    easing: 'steps(1)',
+    easingFunction: stepEnd(1)
+  },
+  {
+    desc: 'steps(1, end) function',
+    easing: 'steps(1, end)',
+    easingFunction: stepEnd(1),
+    serialization: 'steps(1)'
+  },
+  {
+    desc: 'steps(2, end) function',
     easing: 'steps(2, end)',
-    easingFunction: stepEnd(2)
+    easingFunction: stepEnd(2),
+    serialization: 'steps(2)'
   },
   {
     desc: 'linear function',

testing/web-platform/tests/web-animations/resources/keyframe-utils.js

@@ -321,9 +321,9 @@ var gKeyframeSequenceTests = [
                left: "30px" },
              { offset: 0.5, computedOffset: 0.5, easing: "linear",
                top: "40px" },
-             { offset: 1.0, computedOffset: 1.0, easing: "step-end",
+             { offset: 1.0, computedOffset: 1.0, easing: "steps(1)",
                left: "50px" },
-             { offset: 1.0, computedOffset: 1.0, easing: "step-end",
+             { offset: 1.0, computedOffset: 1.0, easing: "steps(1)",
                top: "60px" }] },
   { desc:   "a keyframe sequence with different composite values, but the"
             + " same composite value for a given offset",
@@ -432,7 +432,7 @@ var gKeyframeSequenceTests = [
                left: "300px" },
              { offset: 1.0, computedOffset: 1.0, easing: "ease-out",
                left: "400px" },
-             { offset: 1.0, computedOffset: 1.0, easing: "step-end",
+             { offset: 1.0, computedOffset: 1.0, easing: "steps(1)",
                left: "500px" }] },
 ];