Composited Animations: Introduce pixel-ref layout tests.

third_party/WebKit/LayoutTests/animations/resources/composited-animation-test.js

Index: third_party/WebKit/LayoutTests/animations/resources/composited-animation-test.js
diff --git a/third_party/WebKit/LayoutTests/animations/resources/composited-animation-test.js b/third_party/WebKit/LayoutTests/animations/resources/composited-animation-test.js
new file mode 100644
index 0000000000000000000000000000000000000000..e7d1830366d024dc7e46730dce3e5aec0c25df0a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/animations/resources/composited-animation-test.js
@@ -0,0 +1,204 @@
+'use strict';
+
+class CompositedAnimationTestCommon {
+  constructor(disableThreadedAnimation) {
+    this.disableThreadedAnimation = disableThreadedAnimation;
+    this.tests = [];
+    this.next_sample_id = 1;

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

Use camel cased variable names.
It's not clear what a sample is, can this be named nextInstanceId instead?

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

Done.

+
+    this.createStyles();
+    this.createStaticElements();
+  }
+
+  createStyles() {
+    var item = document.createElement('style');
+    item.type = 'text/css';
+    item.textContent = `.item {
+      width: 20px;
+      height: 20px;
+      position: relative;
+      background: black;
+      float: left;
+    }`;
+
+    var marker = document.createElement('style');
+    marker.type = 'text/css';
+    marker.textContent = `.marker {
+      width: 5px;
+      height: 5px;
+      display: inline-block;
+      background: orange;
+      margin: 15px;
+    }`;

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

Can't these be part of the same stylesheet?

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

Done.

+
+    document.head.appendChild(item);
+    document.head.appendChild(marker);
+  }
+
+  createStaticElements() {
+    var error = document.createElement("span");
+    error.id = 'error';
+    error.style.color = 'red';
+    document.body.appendChild(error);
+
+    var wrapper = document.createElement("div");
+    wrapper.id = 'wrapper';
+    document.body.appendChild(wrapper);

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

We shouldn't rely on the automatic element id global variable for elements
created from Javascript since we already have the handle to them in our current
context. Just add them as members.

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

Done.

+  }
+
+  createTestElements() {
+    var testId = 1;
+
+    this.tests.forEach(function(test) {

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

Use fat arrow notation so you don't have to .bind(this) everywhere.
Alternatively just use for-of instead of forEach.

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

Done.

+      var testWrapper = document.createElement("div");
+      wrapper.appendChild(testWrapper);
+
+      // Create custom styles for this test case.
+      if (test.data.style) {
+        var styleForSamples = document.createElement('style');
+        styleForSamples.type = 'text/css';

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

No need to set type.

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

Done.

+        styleForSamples.textContent = '.test' + testId + ' {' + test.data.style + '}';

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

Nit, this would be a suitable place to use backtick notation for embedded
expressions.

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

Done.

+        document.head.appendChild(styleForSamples);
+      }
+      if (test.data.markerStyle && test.data.markerStyle != '') {

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

No need to check for empty string.

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

Done.

+        var styleForMarkers = document.createElement('style');
+        styleForMarkers.type = 'text/css';
+        styleForMarkers.textContent = '.testMarker' + testId + ' {' + test.data.markerStyle + '}';
+        document.head.appendChild(styleForMarkers);
+      }

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

Instead of adding separate stylesheets just set the inline style of the
elements, check if doing this removes the need for testId entirely.

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

Done.

+
+      test.data.samples.forEach(function(sample) {
+        var element = document.createElement("div");
+
+        if (!testWrapper.hasChildNodes())
+          element.style.clear = "left";
+
+        if (test.data.markerStyle == null || test.data.markerStyle != '') {
+          var content = document.createElement("div");

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

Stick with single quotes in this file for consistency.

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

Done.

+          content.classList.add('marker', 'testMarker' + testId);
+          element.appendChild(content);
+        }
+
+        element.classList.add('item', 'test' + testId);
+
+        var sample_id = this.next_sample_id++;
+        element.id = sample_id;
+
+        testWrapper.appendChild(element);
+
+        test.instances.push({
+          element: element,
+          animation: null,
+          id: sample_id
+        });
+      }.bind(this));
+
+      testId++;
+    }.bind(this));
+
+    // Update all lifecycle phases to propagate all the objects to
+    // the compositor and to clear all the dirty flags.
+    if (window.internals)
+      internals.forceCompositingUpdate(document);
+  }
+
+  startAnimations() {
+    // We want to achieve desired accuracy for splines using a specific duration.
+    // TODO(loyso): Duration mustn't affect cc/blink consistency.
+    // Taken from cubic_bezier.cc:
+    var kBezierEpsilon = 1e-7;
+    // Reverse the blink::accuracyForDuration function to calculate duration
+    // from epsilon:
+    var duration = 1000 * 1.0 / (kBezierEpsilon * 200.0);
+
+    this.tests.forEach(function(test) {

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

Assert that samples and instances are the same length.

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

Done.

+      for (var i = 0; i < test.instances.length; i++) {
+        var sample = test.data.samples[i];
+        var instance = test.instances[i];
+
+        // Use negative animation delays to specify sampled time for each animation.
+        instance.animation = instance.element.animate(test.data.keyframes, {
+            duration: duration,
+            iterations: Infinity,
+            delay: -duration * sample.at,
+            easing: test.data.easing
+        });
+
+        if (window.internals && this.disableThreadedAnimation) {
+          internals.disableCompositedAnimation(instance.animation);
+        }
+      }
+    }.bind(this));
+
+    if (window.internals) {
+      internals.pauseAnimations(0);
+    }
+  }
+
+  assertAnimationsRunningOnCompositorThread() {

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

assertAnimationCompositedState() since we could be asserting that they're not
composited.

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

Done.

+    this.tests.forEach(function(test) {
+      test.instances.forEach(function(instance) {
+        var composited = internals.isCompositedAnimation(instance.animation);
+        if (composited != !this.disableThreadedAnimation)

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

This is very confusing to read. If we rename this.disableThreadedAnimation to
this.composited it would be much clearer.

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

Done.

+          error.textContent += `Animation ${instance.id} ${composited ? 'is' : 'is not'} running on the compositor.`;
+      }.bind(this));
+    }.bind(this));
+  }
+
+  layoutAndPaint() {
+    if (window.testRunner) {
+      testRunner.waitUntilDone();
+      testRunner.layoutAndPaintAsyncThen(function() {
+        if (window.internals) {
+          this.assertAnimationsRunningOnCompositorThread();
+        }
+        testRunner.notifyDone();
+      }.bind(this));
+    }

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

Can we use requestAnimationFrame instead? We should try to make these tests work
with "content_shell --expose-internals-for-testing".

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

Done. layoutAndPaintAsyncThen implicitly posts message for
RenderWidgetCompositor::LayoutAndUpdateLayers and waits for tree activation and
drawing to happen. requestAnimationFrame works (by accident?) but I have no
explanations why. It might be fragile/flaky.

+  }
+
+  registerTestData(testData) {
+    this.tests.push({
+      data: testData,
+      instances: []
+    });
+  }
+
+  registerTestsData(testsData) {
+    testsData.forEach(function(test) {
+      this.registerTestData(test);
+    }.bind(this));
+  }
+
+  run() {
+    this.createTestElements();
+    this.startAnimations();
+    this.layoutAndPaint();
+  }
+}
+
+
+class CompositedAnimationTest extends CompositedAnimationTestCommon {
+  constructor() {
+    var disableThreadedAnimation = false;
+    super(disableThreadedAnimation)
+  }
+}
+
+
+class CompositedAnimationTestExpected extends CompositedAnimationTestCommon {
+  constructor() {
+    var disableThreadedAnimation = true;
+    super(disableThreadedAnimation)
+  }
+}
+
+
+var getLinearSamples = function(n, start, end) {
+  var arr = [];
+  var spread = end - start;
+  for (var i=0; i<=n; i++) {

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

Spaces around binary operators.

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

Done.

+    arr.push(i * spread / n + start);
+  }
+  return arr.map(function(t) { return { at: t }});
+}