Composited Animations: Introduce pixel-ref layout tests.

third_party/WebKit/LayoutTests/animations/resources/composited-animations-data/rotate-zero-degrees.js

Index: third_party/WebKit/LayoutTests/animations/resources/composited-animations-data/rotate-zero-degrees.js
diff --git a/third_party/WebKit/LayoutTests/animations/resources/composited-animations-data/rotate-zero-degrees.js b/third_party/WebKit/LayoutTests/animations/resources/composited-animations-data/rotate-zero-degrees.js
new file mode 100644
index 0000000000000000000000000000000000000000..74a47305c7a81bc2d21eada0f24572b673fdcffc
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/animations/resources/composited-animations-data/rotate-zero-degrees.js
@@ -0,0 +1,72 @@
+var animateRotateNoFromAxis = {
+  keyframes: [
+    { rotate: '0deg' },
+    { rotate: '90deg 0 1 0' },
+  ],
+  style: `background: magenta; margin: 5px;`,

[alancutter (OOO until 2018), 2015/09/30 01:45:27]

No need for backtick string notation here and below.

[loyso (OOO), 2015/10/06 01:47:49]

Done.

+  samples: getLinearSamples(20, 0, 1)
+}
+
+var animateRotateNoToAxis = {
+  keyframes: [
+    { rotate: '0deg 1 0 0' },
+    { rotate: '90deg' },
+  ],
+  style: `background: yellow; margin: 5px;`,
+  samples: getLinearSamples(20, 0, 1)
+}
+
+var animateRotateFromZeroUnder360 = {
+  keyframes: [
+    { rotate: '0deg 1 0 0' },
+    { rotate: '90deg 0 1 0' },
+  ],
+  style: `background: cyan; margin: 5px;`,
+  samples: getLinearSamples(20, 0, 1)
+};
+
+var animateRotateToZeroUnder360 = {
+  keyframes: [
+    { rotate: '90deg 0 1 0' },
+    { rotate: '0deg 1 0 0' },
+  ],
+  style: `background: indigo; margin: 5px;`,
+  samples: getLinearSamples(20, 0, 1)
+};
+
+var animateRotateFromZero = {
+  keyframes: [
+    { rotate: '0deg 1 0 0' },
+    { rotate: '450deg 0 1 0' },
+  ],
+  style: `background: green; margin: 5px;`,
+  samples: getLinearSamples(20, 0, 1)
+};
+
+var animateRotateToZero = {
+  keyframes: [
+    { rotate: '450deg 0 1 0' },
+    { rotate: '0deg 1 0 0' },
+  ],
+  style: `background: red; margin: 5px;`,
+  samples: getLinearSamples(20, 0, 1)
+}
+
+var animateRotateFromAndToZero = {
+  keyframes: [
+    { rotate: '0deg 0 1 0' },
+    { rotate: '0deg 1 0 0' },
+  ],
+  style: `background: blue; margin: 5px;`,

[alancutter (OOO until 2018), 2015/09/30 01:45:27]

margin: 5px; appears in every instance.
I would consider making the interface to be something like:
var testSuite = {
  style: 'margin: 5px;',
  tests: {
    testA: {
      keyframes: ...,
      style: ...,
      fractions: ...,
    },
    ...
  },
};

This allows you to include the test name on the test instances for easier
debugging and doesn't require each test name to be typed a second time in a test
list.

[loyso (OOO), 2015/10/06 01:47:49]

Done.

+  samples: getLinearSamples(20, 0, 1)
+}
+
+var rotateZeroDegreesTests = [
+  animateRotateNoFromAxis,
+  animateRotateNoToAxis,
+  animateRotateFromZeroUnder360,
+  animateRotateToZeroUnder360,
+  animateRotateFromZero,
+  animateRotateToZero,
+  animateRotateFromAndToZero,
+];