Hook up style invalidation for CSS Paint API.

third_party/WebKit/LayoutTests/csspaint/resources/test-runner-invalidation-logging.js

Index: third_party/WebKit/LayoutTests/csspaint/resources/test-runner-invalidation-logging.js
diff --git a/third_party/WebKit/LayoutTests/csspaint/resources/test-runner-invalidation-logging.js b/third_party/WebKit/LayoutTests/csspaint/resources/test-runner-invalidation-logging.js
new file mode 100644
index 0000000000000000000000000000000000000000..1e0eea04cb78b32b3799e5900ab441e2d96dbf2a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/csspaint/resources/test-runner-invalidation-logging.js
@@ -0,0 +1,82 @@
+// Test runner for the paint worklet to test invalidation behaviour.
+//
+// Calls a given function with a newly created element, and prints the expected
+// geometry to the console.
+//
+// Runs each test sequentially after a layout and a paint.
+//
+// Usage:
+// testRunnerInvalidationLogging('background-image', [
+//      { property: 'max-height', value: '100px' },
+//      { property: 'color', value: 'blue' },
+// ]);
+
+function testRunnerInvalidationLogging(imageType, tests) {
+    if (window.testRunner) {
+        testRunner.waitUntilDone();
+        testRunner.dumpAsText();
+    }
+
+    var keys = tests.map(function(obj) { return obj.property; });
+    var workletCode = 'var properties = ' + JSON.stringify(keys) + ';\n' + `
+        for (let i = 0; i < properties.length; i++) {
+            registerPaint('paint-' + i, class {
+                static get inputProperties() { return [properties[i]]; }
+                constructor() { this.hasPainted= false; }
+                paint(ctx, geom) {
+                    ctx.fillStyle = this.hasPainted ? 'green' : 'blue';
+                    ctx.fillRect(0, 0, geom.width, geom.height);
+                    if (this.hasPainted) {
+                        console.log('Successful invalidation for: ' + properties[i]);
+                    }
+                    this.hasPainted = true;
+                }
+            });
+        }
+    `;
+
+    for (let i = 0; i < tests.length; i++) {
+        tests[i].paintName = 'paint-' + i;
+    }
+
+    paintWorklet.import(URL.createObjectURL(new Blob([workletCode]))).then(function() {
+        var callback = function() {
+            if (tests.length == 0) {
+                if (window.testRunner)
+                    testRunner.notifyDone();
+                return;
+            }
+
+            var test = tests.shift();
+            runIndividualTest(imageType, test, callback);
+        };
+
+        callback();
+    });
+}
+
+function runIndividualTest(imageType, test, callback) {
+    var msg = ['', ''];
+    msg.push('Test case:');
+    msg.push(test.property + ': ' + (test.prevValue || 'unset') + ' => ' + test.property + ': ' + (test.value || 'unset'));
+    if (test.noInvalidation) {
+        msg.push('The worklet console should log nothing');
+    } else {
+        msg.push('The worklet console should log: \'Succussful invalidation for: ' + test.property + '\'');
+    }
+    console.log(msg.join('\n'));
+
+    // Create the test div.
+    var el = document.createElement('div');
+    if (test.prevValue) el.style.setProperty(test.property, test.prevValue);
+    el.style[imageType] = 'paint(' + test.paintName + ')';
+    document.body.appendChild(el);
+
+    runAfterLayoutAndPaint(function() {
+        el.style.setProperty(test.property, test.value);
+        runAfterLayoutAndPaint(function() {
+            document.body.removeChild(el);
+            callback();
+        });
+    });
+}