Combine 10 table and selection paint perf tests into 3

Now one perf test combines several change types. We don't actually care about relative small performance changes for each change type, but care more about larger overall changes. BTW add an OWNERS file containing pdr, schenney and wangxianzhu for perf_tests/paint. Change-Id: I3e88b7c2e6f304dfa80a28b2847704850079b536 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2380497 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/master@{#802822}
chromium · Aug 28, 2020 · e2cdb1a · e2cdb1a
1 parent 8d259ac
commit e2cdb1a
Show file tree

Hide file tree

Showing 12 changed files with 134 additions and 396 deletions.
diff --git a/third_party/blink/perf_tests/paint/OWNERS b/third_party/blink/perf_tests/paint/OWNERS
@@ -0,0 +1,3 @@
+pdr@chromium.org
+schenney@chromium.org
+wangxianzhu@chromium.org
diff --git a/...link/perf_tests/paint/large-table-background-change-with-invisible-collapsed-borders.html b/...link/perf_tests/paint/large-table-background-change-with-invisible-collapsed-borders.html
diff --git a/.../blink/perf_tests/paint/large-table-background-change-with-visible-collapsed-borders.html b/.../blink/perf_tests/paint/large-table-background-change-with-visible-collapsed-borders.html
diff --git a/...ink/perf_tests/paint/large-table-background-change-with-zero-width-collapsed-borders.html b/...ink/perf_tests/paint/large-table-background-change-with-zero-width-collapsed-borders.html
diff --git a/third_party/blink/perf_tests/paint/large-table-background-change.html b/third_party/blink/perf_tests/paint/large-table-background-change.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<body>
+<script src="../resources/runner.js"></script>
+<script src="resources/paint.js"></script>
+<style>
+  table {
+    border-collapse: collapse;
+    will-change: transform;
+  }
+  table.zero-width-border td {
+    border: 0px solid blue;
+  }
+  table.visible-border td {
+    border: 1px solid blue;
+  }
+</style>
+<script>
+function createTable(rows, columns) {
+    var table = document.createElement("TABLE");
+    for (var i = 0; i < rows; ++i) {
+        var tr = document.createElement("TR");
+        for (var j = 0; j < columns; ++j) {
+            var td = document.createElement("TD");
+            tr.appendChild(td);
+        }
+        table.appendChild(tr);
+    }
+    return table;
+}
+
+var table1 = createTable(300, 300);
+table1.className = 'zero-width-border';
+document.body.appendChild(table1);
+
+var table2 = createTable(300, 300);
+table2.className = 'invisible-border';
+document.body.appendChild(table2);
+
+var table3 = createTable(300, 300);
+table3.className = 'visible-border';
+document.body.appendChild(table3);
+
+var count = 0;
+var ix = 30;
+var iy = 30;
+
+measurePaint({
+  iterationCount: 30,
+  run: function() {
+    var table = [table1, table2, table3][count % 3];
+    table.childNodes[iy].childNodes[ix].style.backgroundColor = 'teal';
+    ix++;
+    iy++;
+    count++;
+  },
+});
+</script>
+</body>
diff --git a/third_party/blink/perf_tests/paint/large-table-collapsed-border-change-with-backgrounds.html b/third_party/blink/perf_tests/paint/large-table-collapsed-border-change-with-backgrounds.html
diff --git a/third_party/blink/perf_tests/paint/large-table-collapsed-border-change-with-text.html b/third_party/blink/perf_tests/paint/large-table-collapsed-border-change-with-text.html
diff --git a/third_party/blink/perf_tests/paint/large-table-collapsed-border-change.html b/third_party/blink/perf_tests/paint/large-table-collapsed-border-change.html
@@ -2,36 +2,66 @@
 <body>
 <script src="../resources/runner.js"></script>
 <script src="resources/paint.js"></script>
-<style>td { border: 1px solid blue }</style>
+<style>
+  table {
+    border: 2px solid green;
+    border-collapse: collapse;
+    font-size: 3px;
+    will-change: transform;
+  }
+  td {
+    border: 1px solid blue;
+  }
+  table.text td::before {
+    content: "ABC";
+  }
+  table.background td {
+    background: green;
+  }
+</style>
 <script>
 function createTable(rows, columns) {
-    var table = document.createElement("TABLE");
-    // Collapsing border is not necessary to see the slowness
-    // but it makes the painting phase ~2x slower.
-    table.style.borderCollapse = "collapse";
-    for (var i = 0; i < rows; ++i) {
-        var tr = document.createElement("TR");
-        for (var j = 0; j < columns; ++j) {
-            var td = document.createElement("TD");
-            tr.appendChild(td);
-        }
-        table.appendChild(tr);
+  var table = document.createElement("TABLE");
+  for (var i = 0; i < rows; ++i) {
+    var tr = document.createElement("TR");
+    for (var j = 0; j < columns; ++j) {
+      var td = document.createElement("TD");
+      tr.appendChild(td);
     }
-    return table;
+    table.appendChild(tr);
+  }
+  return table;
 }
 
-var table = createTable(300, 320);
-document.body.appendChild(table);
+var table1 = createTable(100, 100);
+document.body.appendChild(table1);
 
+var table2= createTable(150, 150);
+table2.className = 'text';
+document.body.appendChild(table2);
+
+var table3 = createTable(150, 150);
+table3.className = 'background';
+document.body.appendChild(table3);
+
+var count = 0;
 var ix = 30;
 var iy = 30;
 
 measurePaint({
-    run: function() {
-        table.childNodes[iy].childNodes[ix].style.borderColor = "red";
-        ix++;
-        iy++;
-    },
+  iterationCount: 40,
+  run: function() {
+    if (count % 4 == 0) {
+      table1.style.borderColor = table1.style.borderColor == 'green' ?
+          'yellow' : 'green';
+    } else {
+      var table = [table1, table2, table3][count % 3];
+      table.childNodes[iy].childNodes[ix].style.borderColor = "red";
+      ix++;
+      iy++;
+    }
+    count++;
+  },
 });
 </script>
 </body>
diff --git a/third_party/blink/perf_tests/paint/large-table-repaint.html b/third_party/blink/perf_tests/paint/large-table-repaint.html