Composited Animations: Introduce pixel-ref layout tests.

third_party/WebKit/LayoutTests/animations/resources/composited-animations-data/timing-function.js

Index: third_party/WebKit/LayoutTests/animations/resources/composited-animations-data/timing-function.js
diff --git a/third_party/WebKit/LayoutTests/animations/resources/composited-animations-data/timing-function.js b/third_party/WebKit/LayoutTests/animations/resources/composited-animations-data/timing-function.js
new file mode 100644
index 0000000000000000000000000000000000000000..62698303a8476eba7f25a61f007185c50956447c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/animations/resources/composited-animations-data/timing-function.js
@@ -0,0 +1,72 @@
+var timingFunctionTests = {
+  tests: {
+    translateSteps: {
+      keyframes: [
+        {transform: 'translateX(100px)'},
+        {transform: 'translateX(500px)'}
+      ],
+      easing: 'steps(9)',
+      style: 'background: maroon; float: none;',
+      samples: [
+        {at: 0},
+        {at: 0.25},
+        {at: 0.5},
+        {at: 0.75},
+        {at: 1.1},
+      ]
+    },
+
+    translateStepsPerKeyframe: {
+      keyframes: [
+        {transform: 'translateX(100px)', easing: 'steps(18)'},
+        {transform: 'translateX(400px)', easing: 'steps(9)'},
+        {transform: 'translateX(500px)'}
+      ],
+      style: 'background: navy; float: none;',
+      samples: [
+        {at: 0},
+        {at: 0.25},
+        {at: 0.35},
+        {at: 0.5},
+        {at: 0.65},
+        {at: 0.75},
+        {at: 1.1},
+      ]
+    },
+
+    translateStepsWithCubicBezier: {
+      keyframes: [
+        {transform: 'translateX(100px)', easing: 'steps(9)'},
+        {transform: 'translateX(500px)'}
+      ],
+      easing: 'cubic-bezier(.5, -1, .5, 2)',
+      style: 'background: black; float: none;',
+      samples: [
+        {at: 0},
+        {at: 0.4},
+        {at: 0.45},
+        {at: 0.5},
+        {at: 0.6},
+        {at: 1.41},
+      ]
+    },
+
+    translateCubicBezierWithSteps: {
+      keyframes: [
+        {transform: 'translateX(100px)', easing: 'cubic-bezier(.5, -1, .5, 2)'},
+        {transform: 'translateX(500px)'}
+      ],
+      easing: 'steps(9)',
+      style: 'background: peru; float: none;',
+      samples: [
+        {at: 0},
+        {at: 0.25},
+        {at: 0.35},
+        {at: 0.5},
+        {at: 0.65},
+        {at: 0.75},
+        {at: 1.39},
+      ]
+    },
+  }
+};