[SPv2] Decomposite otherwise-compositable animations that paint nothing.

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

 'use strict';
 
 class CompositedAnimationTestCommon {
   constructor(composited) {
     this.composited = composited;
     this.tests = [];
     this.nextInstanceId = 1;
+    this.errorCount = 0;
 
     this.createStyles();
     this.createStaticElements();
   }
 
   createStyles() {
     var styleSheet = document.createElement('style');
     styleSheet.textContent = `
     .item {
       width: 20px;
       height: 20px;
       position: relative;
       background: black;
       float: left;
     }
     .marker {
       width: 5px;
       height: 5px;
       display: inline-block;
       background: orange;
       margin: 15px;
     }`;
 
     document.head.appendChild(styleSheet);
   }
 
   createStaticElements() {
     this.error = document.createElement('span');
-    this.error.style.color = 'red';
-    // The element must have some painted content in order to be composited.
-    this.error.textContent = 'x';
+    this.error.style = 'color: red; font-family: monospace; font-size: 12px';
+    // The error element must have some painted content in order to be
+    // composited when animated in SPv2.
+    this.error.innerText = '(no errors)';
     document.body.appendChild(this.error);
 
     this.wrapper = document.createElement('div');
     document.body.appendChild(this.wrapper);
   }
 
   createTestElements() {
     this.tests.forEach(test => {
       test.testWrapper = document.createElement('div');
       this.wrapper.appendChild(test.testWrapper);
@@ skipping 52 matching lines @@
 
     this.tests.forEach(test => {
       if (test.instances.length != test.data.samples.length)
         this.reportError(test, `instances.length=${test.instances.length} != samples.length=${test.data.samples.length}`);
 
       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.
+        // console.log('Creating test instance [duration=' + duration + ', delay=' + (-duration * sample.at) + ', easing=' + test.data.easing + '].');

[pdr., 2017/03/24 20:37:47]

nit: did you mean to leave this in?

[wkorman, 2017/03/24 20:59:26]

Ah, good catch, removed.

         instance.animation = instance.element.animate(test.data.keyframes, {
             duration: duration,
             iterations: Infinity,
             delay: -duration * sample.at,
             easing: test.data.easing
         });
 
         if (window.internals && !this.composited)
           internals.disableCompositedAnimation(instance.animation);
       }
     });
 
     if (window.internals)
       internals.pauseAnimations(0);
   }
 
   assertAnimationCompositedState() {
     this.tests.forEach(test => {
       test.instances.forEach(instance => {
         var composited = internals.isCompositedAnimation(instance.animation);
         if (composited != this.composited)
-          this.reportError(test, `Animation ${composited ? 'is' : 'is not'} running on the compositor.`);
+          this.reportError(test, `Animation ${composited ? 'is' : 'is not'} running on the compositor [id=${instance.id}].`);
       });
     });
   }
 
   reportError(test, message) {
-    if (!this.error.textContent)
-      this.error.textContent = `${this.composited ? 'Tests:' : 'TestExpectations:'} `;
+    if (this.errorCount == 0)
+      this.error.innerHTML = `${this.composited ? 'Tests:' : 'TestExpectations:'}<br>`;
 
-    this.error.textContent += `${test.name}: ${message} `;
+    if (this.errorCount > 0)
+        this.error.innerHTML += '<br>';
+    this.error.innerHTML += `${test.name}: ${message} `;
+    this.errorCount++;
   }
 
   waitForCompositor() {
     return this.error.animate({opacity: ['1', '1']}, 1).ready;
   }
 
   layoutAndPaint() {
     if (window.testRunner)
       testRunner.waitUntilDone();
 
@@ skipping 56 matching lines @@
 }
 
 var getLinearSamples = function(n, start, end) {
   var arr = [];
   var spread = end - start;
   for (var i = 0; i <= n; i++)
     arr.push(i * spread / n + start);
   return arr.map(t => { return {at: t} });
 }