--- a/dom/animation/test/css-animations/file_keyframeeffect-getkeyframes.html
+++ b/dom/animation/test/css-animations/file_keyframeeffect-getkeyframes.html
@@ -166,26 +166,22 @@ function assert_frames_equal(a, b, name)
 // getKeyframes() will group frames with the same easing function
 // together (by nsTimingFunction::Compare).
 const kTimingFunctionValues = [
   "ease",
   "linear",
   "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) {
   var div = addDiv(t);
 
   div.style.animation = 'anim-empty 100s';
   assert_equals(getKeyframes(div).length, 0,
                 "number of frames with empty @keyframes");
@@ -251,33 +247,33 @@ test(function(t) {
   div.style.animation = 'anim-simple-timing 100s';
   var frames = getKeyframes(div);
 
   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, "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');
 
 test(function(t) {
   var div = addDiv(t);
 
   div.style.animation = 'anim-simple-timing-some 100s step-start';
   var frames = getKeyframes(div);
 
   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');
 
 test(function(t) {
   var div = addDiv(t);
 
   div.style.animation = 'anim-simple-shorthand 100s';
@@ -423,17 +419,17 @@ test(function(t) {
   div.style.animation = 'anim-different-props-and-easing 100s';
   var frames = getKeyframes(div);
 
   assert_equals(frames.length, 4, "number of frames");
 
   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" },
     { offset: 1, computedOffset: 1, easing: "ease",
       color: "rgb(255, 255, 255)", marginTop: "16px" },
   ];
 
   for (var i = 0; i < frames.length; i++) {
@@ -469,17 +465,17 @@ test(function(t) {
   var div = addDiv(t);
 
   div.style.animation = 'anim-merge-offset-and-easing 100s';
   var frames = getKeyframes(div);
 
   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" },
     { offset: 1, computedOffset: 1, easing: "ease",
       color: "rgb(255, 255, 255)", fontSize: "32px", marginTop: "16px",
       paddingLeft: "4px" },
   ];
 
@@ -494,23 +490,23 @@ test(function(t) {
   var div = addDiv(t);
 
   div.style.animation = 'anim-no-merge-equiv-easing 100s';
   var frames = getKeyframes(div);
 
   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" },
   ];
 
   for (var i = 0; i < frames.length; i++) {
     assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
   }

--- a/dom/animation/test/css-transitions/file_keyframeeffect-getkeyframes.html
+++ b/dom/animation/test/css-transitions/file_keyframeeffect-getkeyframes.html
@@ -54,17 +54,17 @@ test(function(t) {
   div.style.transition = 'left 100s steps(2,end)';
   div.style.left = '100px';
 
   var frames = getKeyframes(div);
 
   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" },
   ];
 
   for (var i = 0; i < frames.length; i++) {
     assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
   }
 }, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a simple'
    + ' transition with a non-default easing function');

--- a/layout/style/nsStyleUtil.cpp
+++ b/layout/style/nsStyleUtil.cpp
@@ -594,40 +594,22 @@ nsStyleUtil::AppendSerializedFontSrc(con
 nsStyleUtil::AppendStepsTimingFunction(nsTimingFunction::Type aType,
                                        uint32_t aSteps,
                                        nsTimingFunction::StepSyntax aSyntax,
                                        nsAString& aResult)
 {
   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(")");
   }
 }
 
 /* static */ void
 nsStyleUtil::AppendCubicBezierTimingFunction(float aX1, float aY1,
                                              float aX2, float aY2,
                                              nsAString& aResult)
 {

--- a/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
+++ b/testing/web-platform/tests/web-animations/interfaces/AnimationEffectTiming/easing.html
@@ -23,17 +23,17 @@ function assert_progress(animation, curr
 
 gEffectEasingTests.forEach(function(options) {
   test(function(t) {
     var target = createDiv(t);
     var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
                               { 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);
     assert_progress(anim, 250 * MS_PER_SEC, easing);
     assert_progress(anim, 500 * MS_PER_SEC, easing);
     assert_progress(anim, 750 * MS_PER_SEC, easing);
     assert_progress(anim, 1000 * MS_PER_SEC, easing);
   }, options.desc);

--- a/testing/web-platform/tests/web-animations/resources/effect-easing-tests.js
+++ b/testing/web-platform/tests/web-animations/resources/effect-easing-tests.js
@@ -1,18 +1,47 @@
 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',
     easing: 'linear', // cubic-bezier(0, 0, 1.0, 1.0)
     easingFunction: cubicBezier(0, 0, 1.0, 1.0)
   },
   {
     desc: 'ease function',

--- a/testing/web-platform/tests/web-animations/resources/keyframe-utils.js
+++ b/testing/web-platform/tests/web-animations/resources/keyframe-utils.js
@@ -316,19 +316,19 @@ var gKeyframeSequenceTests = [
     output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease",
                left: "10px" },
              { offset: 0.0, computedOffset: 0.0, easing: "ease",
                top: "20px" },
              { offset: 0.5, computedOffset: 0.5, easing: "linear",
                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",
     input:  [{ offset: 0.0, composite: "replace", left: "10px" },
              { offset: 0.0, composite: "replace", top: "20px" },
              { offset: 0.5, composite: "add",     left: "30px" },
              { offset: 0.5, composite: "add",     top: "40px" },
              { offset: 1.0, composite: "replace", left: "50px" },
@@ -427,17 +427,17 @@ var gKeyframeSequenceTests = [
     output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease",
                left: "100px" },
              { offset: 0.0, computedOffset: 0.0, easing: "ease",
                left: "200px" },
              { offset: 0.5, computedOffset: 0.5, easing: "linear",
                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" }] },
 ];
 
 var gInvalidKeyframesTests = [
   { desc:     "keyframes with an out-of-bounded positive offset",
     input:    [ { opacity: 0 },
                 { opacity: 0.5, offset: 2 },
                 { opacity: 1 } ],