Increase load of blink_perf.paint to reduce flakiness

We measure frame time so the granularity of frame cycle affects the
accuracy (small load sometime causes 1 cycle flakiness) and visibility
(performance difference of a too small load is hidden by the smallest
frame cycle) of the results. See https://goo.gl/wGEsdM for samples of
the flakiness.

Increase load to avoid the above issues, especially after we excluded
GC time from the measured time (https://codereview.chromium.org/2559893002/)
for crbug.com/667811.

Now most of the measured times on my local Linux machine are between
100ms and 300ms.

Modified some tests to avoid the increased load from causing too much
layout time.

NOTRY=true (try bots help nothing for this CL)

Review-Url: https://codereview.chromium.org/2564773003
Cr-Commit-Position: refs/heads/master@{#437652}

third_party/WebKit/PerformanceTests/Paint/color-changes.html

@@ -3,7 +3,6 @@
 <script src="../resources/runner.js"></script>
 <style>
   span {
-    background-color: white;
     padding: 1px;
   }
   .changeColor {
@@ -14,29 +13,43 @@
 // This test measures the lifecycle update performance of changing background
 // colors in large trees.
 
-function buildTree(parent, depth, arity, createElementCallback) {
+function buildTree(parent, depth, arity, tagNameCallback, createElementCallback) {
   for (var child = 0; child < arity; child++) {
-    var element = document.createElement('span');
+    var element = document.createElement(tagNameCallback(depth));
     parent.appendChild(element);
     createElementCallback(element, depth);
     if (depth > 1)
-      buildTree(element, depth - 1, arity, createElementCallback);
+      buildTree(element, depth - 1, arity, tagNameCallback, createElementCallback);
   }
 }
 
-// Build a tall tree (depth=10) that is skinny (arity=2). A middle layer of
+// Build a tall tree that is skinny. A middle layer of
 // the tree should have the changeColor class.
-buildTree(document.body, 11, 2, function(element, depth) {
-  if (depth == 5)
-    element.setAttribute('class', 'changeColor');
-});
+buildTree(document.body, 15, 2,
+  function(depth) {
+    // Use divs at upper levels to avoid too much layout time.
+    return depth > 9 ? 'div' : 'span';
+  },
+  function(element, depth) {
+    element.style.backgroundColor = 'green';
+    if (depth == 5)
+      element.setAttribute('class', 'changeColor');
+  }
+);
 
-// Build a short tree (depth=6) that is fat (arity=4). A middle layer of
+// Build a short tree that is fat. A middle layer of
 // the tree should have the changeColor class.
-buildTree(document.body, 6, 4, function(element, depth) {
-  if (depth == 3)
-    element.setAttribute('class', 'changeColor');
-});
+buildTree(document.body, 6, 7,
+  function(depth) {
+    // Use divs at upper levels to avoid too much layout time.
+    return depth > 4 ? 'div' : 'span';
+  },
+  function(element, depth) {
+    element.style.backgroundColor = 'orange';
+    if (depth == 3)
+      element.setAttribute('class', 'changeColor');
+  }
+);
 
 var runCount = 0;
 var elementsToChange = document.getElementsByClassName('changeColor');

third_party/WebKit/PerformanceTests/Paint/large-table-background-change-with-invisible-collapsed-borders.html

@@ -18,7 +18,7 @@ function createTable(rows, columns) {
     return table;
 }
 
-var table = createTable(300, 320);
+var table = createTable(600, 600);
 document.body.appendChild(table);
 
 var ix = 30;

third_party/WebKit/PerformanceTests/Paint/large-table-background-change-with-visible-collapsed-borders.html

@@ -19,7 +19,7 @@ function createTable(rows, columns) {
     return table;
 }
 
-var table = createTable(300, 320);
+var table = createTable(400, 400);
 document.body.appendChild(table);
 
 var ix = 30;

third_party/WebKit/PerformanceTests/Paint/paint-offset-changes.html

@@ -19,10 +19,10 @@
 <script>
 // This test measures the lifecycle update performance of changing paint offset.
 
-// Create a column with 100 rows of divs and 50 spans on each row.
+// Create a column with many rows of divs and many spans on each row.
 function createColumn(parent) {
-  var rowsPerColumn = 100;
-  var spansPerRow = 50;
+  var rowsPerColumn = 200;
+  var spansPerRow = 100;
   var columnDiv = document.createElement('div');
   parent.appendChild(columnDiv);
   columnDiv.setAttribute('class', 'column');

third_party/WebKit/PerformanceTests/Paint/transform-changes.html

@@ -14,31 +14,43 @@
 // This test measures the lifecycle update performance of changing transforms
 // in large trees.
 
-function buildTree(parent, depth, arity, createElementCallback) {
+function buildTree(parent, depth, arity, tagNameCallback, createElementCallback) {
   for (var child = 0; child < arity; child++) {
-    var element = document.createElement('span');
+    var element = document.createElement(tagNameCallback(depth));
     parent.appendChild(element);
     createElementCallback(element, depth);
     if (depth > 1)
-      buildTree(element, depth - 1, arity, createElementCallback);
+      buildTree(element, depth - 1, arity, tagNameCallback, createElementCallback);
   }
 }
 
-// Build a tall tree (depth=10) that is skinny (arity=2). A middle layer of
+// Build a tall tree that is skinny. A middle layer of
 // the tree should have the changeTransform class.
-buildTree(document.body, 11, 2, function(element, depth) {
-  element.style.borderColor = 'red';
-  if (depth == 5)
-    element.setAttribute('class', 'changeTransform');
-});
+buildTree(document.body, 13, 2,
+  function(depth) {
+    // Use divs at upper levels to avoid too much layout time.
+    return depth > 11 ? 'div' : 'span';
+  },
+  function(element, depth) {
+    element.style.borderColor = 'red';
+    if (depth == 5)
+      element.setAttribute('class', 'changeTransform');
+  }
+);
 
-// Build a short tree (depth=6) that is fat (arity=4). A middle layer of
+// Build a short tree that is fat. A middle layer of
 // the tree should have the changeTransform class.
-buildTree(document.body, 6, 4, function(element, depth) {
-  element.style.borderColor = 'orange';
-  if (depth == 3)
-    element.setAttribute('class', 'changeTransform');
-});
+buildTree(document.body, 6, 6,
+  function(depth) {
+    // Use divs at upper levels to avoid too much layout time.
+    return depth > 5 ? 'div' : 'span';
+  },
+  function(element, depth) {
+    element.style.borderColor = 'orange';
+    if (depth == 3)
+      element.setAttribute('class', 'changeTransform');
+  }
+);
 
 var runCount = 0;
 var elementsToChange = document.getElementsByClassName('changeTransform');