Composited Animations: Introduce pixel-ref layout tests.

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

Index: LayoutTests/animations/resources/composited-animation-test.js
diff --git a/LayoutTests/animations/resources/composited-animation-test.js b/LayoutTests/animations/resources/composited-animation-test.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d883720556c6fee38868d2b9b772a7cde42a0e8
--- /dev/null
+++ b/LayoutTests/animations/resources/composited-animation-test.js
@@ -0,0 +1,168 @@
+'use strict';
+
+class CompositedAnimationTest {
+  constructor(disableThreadedAnimation) {
+    this.disableThreadedAnimation = disableThreadedAnimation;
+    this.tests = [];
+    this.next_id = 1;
+
+    if (window.internals) {
+      internals.disableThreadedAnimation(disableThreadedAnimation);
+    }
+
+    this.createStyles();
+    this.createStaticElements();
+  }
+
+  createStyles() {
+    var item = document.createElement('style');
+    item.type = 'text/css';
+    item.innerHTML = '.item {\
+      width: 20px;\
+      height: 20px;\
+      position: relative;\
+      background: black;\
+    }';
+
+    var marker = document.createElement('style');
+    marker.type = 'text/css';
+    marker.innerHTML = '.marker {\
+      width: 5px;\
+      height: 5px;\
+      display: inline-block;\
+      background: orange;\
+      margin: 15px;\
+    }';
+
+    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);
+  }
+
+  createTestElements() {
+    this.tests.forEach(function(test) {
+      var testWrapper = document.createElement("div");
+      wrapper.appendChild(testWrapper);
+
+      test.data.stamps.forEach(function(stamp) {
+        var element = document.createElement("div");
+        element.className = "item";
+        element.style.backgroundColor = test.data.color;
+
+        if (!testWrapper.hasChildNodes())
+          element.style.clear = "left";
+
+        if (test.data.vertical == null || !test.data.vertical)

[dstockwell, 2015/08/06 00:23:19]

These seem fairly arbitrary inputs to provide to the test configuraiton, can you
just use CSS?

[loyso (OOO), 2015/09/14 06:19:07]

Yeah. WIP, I'll add it in a special Patch Set.

[loyso (OOO), 2015/09/15 07:50:52]

Done. Note that I want to keep tests grouped so all test data resides in js file
and .html and -expected.html files are only a sub. So I can't use <template>
html stuff for markers/div contents 'as-is'.

I want to keep it simple, so each test case contains a style declaration. It
suits our needs.

+          element.style.float = "left";
+
+        if (test.data.margin)
+          element.style.margin = test.data.margin + 'px';
+
+        if (test.data.divSize) {
+          element.style.width = test.data.divSize + 'px';
+          element.style.height = test.data.divSize + 'px';
+        }
+
+        if (test.data.marker == null || test.data.marker) {
+          var content = document.createElement("div");
+          content.className = "marker";
+          if (test.data.divSize) {
+            content.style.margin = (test.data.divSize - 5) + 'px';
+          }
+          element.appendChild(content);
+        }
+
+        var id = this.next_id++;
+        element.id = id;
+
+        testWrapper.appendChild(element);
+
+        test.instances.push({
+          element: element,
+          animation: null,
+          id: id
+        });
+      }.bind(this));
+    }.bind(this));
+
+    if (window.internals)
+      internals.forceCompositingUpdate(document);

[dstockwell, 2015/08/06 00:23:19]

// why

[loyso (OOO), 2015/09/14 06:19:07]

Done.

+  }
+
+  startAnimations() {
+    // 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);

[Ian Vollick, 2015/08/05 13:58:46]

nit: isn't this just 5.0/kBezierEpsilon?

[loyso (OOO), 2015/09/14 06:19:07]

This is a reverse for the mentioned function:

// Calculates the accuracy for evaluating a timing function for an animation
with the specified duration.
inline double accuracyForDuration(double duration)
{
    return 1.0 / (200.0 * duration);
}

... and 1000 is a conversion from seconds to ms.

I could set a crbug to make this beavior consistent in blink and cc.

+    // TODO(loyso): Duration mustn't affect cc/blink consistency.
+    // duration = 5000;

[Ian Vollick, 2015/08/05 13:58:46]

What's with this commented-out line? Leftover from debugging?

[loyso (OOO), 2015/09/14 06:19:07]

Yep. If you don't adjust the duration then it becomes inconsistent so the test
fails.

+    this.tests.forEach(function(test) {
+      for (var i = 0; i < test.instances.length; i++) {
+        var stamp = test.data.stamps[i];
+        var instance = test.instances[i];
+        instance.animation = instance.element.animate(test.data.keyframes, {
+            duration: duration,
+            iterations: Infinity,
+            delay: -duration * stamp.at,

[Ian Vollick, 2015/08/05 13:58:46]

Ah, so these tests work by getting the animation to effectively start paused at
the time fraction you care about?

[loyso (OOO), 2015/08/06 06:44:18]

Yes, exactly. This is special "paused mode" where you can freeze time on
per-animation basis. Relevant fix: https://codereview.chromium.org/1255883006/
This is the most simple and inexpensive way to test composited animations for
now. If you have other ideas, it's time to propose them. :) They are welcome.

+            easing: test.data.easing
+        });
+      }
+    });
+
+    if (window.internals) {
+      internals.pauseAnimations(0);

[dstockwell, 2015/08/06 00:23:19]

Doesn't this get called before we start the compositor animations?

[loyso (OOO), 2015/08/06 06:44:18]

Internals::pauseAnimations calls updateAllLifecyclePhases, which causes
CompositorPendingAnimations::update + Animation::preCommit with a creation of
main-thread cc::Animation objects. Impl-thread cc::Animation objects get
run_state_ PAUSED and pause_time_ during next commit.

+    }
+  }
+
+  assertRunningThread() {

[Ian Vollick, 2015/08/05 13:58:46]

nit: assertAnimationsRunningOnCompositorThread, or if that's too verbose, at
least assertRunningOnThread.

[loyso (OOO), 2015/09/14 06:19:07]

Done.

+    this.tests.forEach(function(test) {
+      test.instances.forEach(function(instance) {
+        var composited = internals.isCompositedAnimation(instance.animation);
+        if (composited != !this.disableThreadedAnimation)
+          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.assertRunningThread();
+        }
+        testRunner.notifyDone();
+      }.bind(this));
+    }
+  }
+
+  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();
+  }
+}