| Index: third_party/WebKit/PerformanceTests/Paint/color-changes.html
|
| diff --git a/third_party/WebKit/PerformanceTests/Paint/color-changes.html b/third_party/WebKit/PerformanceTests/Paint/color-changes.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..3ed433d400e5e3a85eb2a41928f948faa0097a1c
|
| --- /dev/null
|
| +++ b/third_party/WebKit/PerformanceTests/Paint/color-changes.html
|
| @@ -0,0 +1,67 @@
|
| +<!DOCTYPE html>
|
| +<body>
|
| +<script src="../resources/runner.js"></script>
|
| +<style>
|
| + span {
|
| + background-color: white;
|
| + 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, createElementCallback) {
|
| + for (var child = 0; child < arity; child++) {
|
| + var element = document.createElement('span');
|
| + parent.appendChild(element);
|
| + createElementCallback(element, depth);
|
| + if (depth > 1)
|
| + buildTree(element, depth - 1, arity, createElementCallback);
|
| + }
|
| +}
|
| +
|
| +// Build a tall tree (depth=10) that is skinny (arity=2). 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');
|
| +});
|
| +
|
| +// Build a short tree (depth=6) that is fat (arity=4). 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');
|
| +});
|
| +
|
| +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)"
|
| +];
|
| +PerfTestRunner.measureFrameTime({
|
| + run: function() {
|
| + runCount++;
|
| + var newColor = colors[runCount % colors.length];
|
| + for (var index = 0; index < elementsToChange.length; index++)
|
| + elementsToChange[index].style.backgroundColor = newColor;
|
| + },
|
| + warmUpCount: 5,
|
| +});
|
| +</script>
|
| +</body>
|
|
|