Web Animations API: Implement step-middle and steps(x, middle) timing functions.

LayoutTests/animations/timing-functions.html

Index: LayoutTests/animations/timing-functions.html
diff --git a/LayoutTests/animations/timing-functions.html b/LayoutTests/animations/timing-functions.html
index bea1164741936c8fd407ded8fe39f72474f3a9de..899ac72824ab16977cfb10b3018b1a8198d4e6b1 100644
--- a/LayoutTests/animations/timing-functions.html
+++ b/LayoutTests/animations/timing-functions.html
@@ -20,6 +20,28 @@
         from { left: 100px; }
         to   { left: 200px; }
     }
+
+    .box-step-middle {
+      position: relative;
+      left: 100px;
+      top: 0px;
+      height: 5px;
+      width: 5px;
+      background-color: blue;
+      -webkit-animation-duration: 1s;
+      -webkit-animation-name: anim-step-middle;
+      /* 
+       * Set initial timing function to something other than the default (ease)
+       * to check that attempts to set easing to step-middle result in the
+       * default, not the initial, being used.
+       */
+      -webkit-animation-timing-function: linear;
+    }
+    @-webkit-keyframes anim-step-middle {
+        from { left: 100px; }
+        to   { left: 200px; }
+    }
+
     #box1 {
     }
     #box2 {
@@ -43,6 +65,16 @@
     #box8 {
       -webkit-animation-timing-function: steps(3, end);
     }
+    /*
+     * The step-middle functions are invalid except through the Web Animations API
+     * and should behave like 'ease', unless step-middle has been added to the CSS specification.
+     */
+    #box9 {
+      -webkit-animation-timing-function: steps(3, middle);
+    }
+    #box10 {
+      -webkit-animation-timing-function: step-middle;
+    }
     
   </style>
   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
@@ -74,6 +106,12 @@
       [0.25, "box8", "left", 100, 5],
       [0.50, "box8", "left", 133, 5],
       [0.75, "box8", "left", 166, 5],
+      [0.25, "box9", "left", 141, 5],
+      [0.50, "box9", "left", 180, 5],
+      [0.75, "box9", "left", 196, 5],
+      [0.25, "box10", "left", 141, 5],
+      [0.50, "box10", "left", 180, 5],
+      [0.75, "box10", "left", 196, 5],
     ];
     
     runAnimationTest(expectedValues);
@@ -99,6 +137,10 @@ It takes 3 snapshots and expects each result to be within a specified range.
 </div>
 <div class="box" id="box8">
 </div>
+<div class="box-step-middle" id="box9">
+</div>
+<div class="box-step-middle" id="box10">
+</div>
 <div id="result">
 </div>
 </body>