| <!DOCTYPE html> |
| <body> |
| <script src="../resources/runner.js"></script> |
| <script src="resources/paint.js"></script> |
| <style> |
| span { |
| padding: 1px; |
| } |
| .changeColor { |
| background-color: green; |
| } |
| </style> |
| <script> |
| // This test measures the lifecycle update performance of changing background |
| // colors in large trees. |
| |
| function buildTree(parent, depth, arity, tagNameCallback, createElementCallback) { |
| for (var child = 0; child < arity; child++) { |
| var element = document.createElement(tagNameCallback(depth)); |
| parent.appendChild(element); |
| createElementCallback(element, depth); |
| if (depth > 1) |
| buildTree(element, depth - 1, arity, tagNameCallback, createElementCallback); |
| } |
| } |
| |
| // Build a tall tree that is skinny. A middle layer of |
| // the tree should have the changeColor class. |
| 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 that is fat. A middle layer of |
| // the tree should have the changeColor class. |
| 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'); |
| var colors = [ |
| "rgb(128, 18, 237)", |
| "rgb(191, 1, 191)", |
| "rgb(237, 18, 128)", |
| "rgb(255, 64, 64)", |
| "rgb(237, 127, 18)", |
| "rgb(191, 191, 1)", |
| "rgb(128, 237, 18)", |
| "rgb(64, 255, 64)", |
| "rgb(18, 237, 127)", |
| "rgb(1, 191, 191)", |
| "rgb(18, 128, 237)", |
| "rgb(64, 64, 255)" |
| ]; |
| measurePaint({ |
| run: function() { |
| runCount++; |
| var newColor = colors[runCount % colors.length]; |
| for (var index = 0; index < elementsToChange.length; index++) |
| elementsToChange[index].style.backgroundColor = newColor; |
| }, |
| }); |
| </script> |
| </body> |
