<!DOCTYPE html>
<body>
<script src="../resources/runner.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, 5, 5,
  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');
  }
);

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: 3,
  iterationCount: 10,
  tracingCategories: 'blink',
  traceEventsToMeasure: [
    'LocalFrameView::RunPrePaintLifecyclePhase',
    'LocalFrameView::RunPaintLifecyclePhase'
  ]
});
</script>
</body>