<html>
<head>
<style>
  div {
    transform: translate(1px);
    width:10px;
    height:10px;
    background-color:green;
    display: inline-block;
  }
</style>
</head>
<body id="body">
</body>
<script>

var start = null;
var divCount = 1000;
var maxIterations = 600;

// ensure contentful paint occurs
document.body.innerHTML = "DisplayList inactive mutate";

for (var i = 0; i < divCount; i++) {
  var div = document.createElement("div");
  div.id = i;
  document.getElementById("body").appendChild(div);
}

var iteration = 0;
function runFrame() {
  if (document.getElementById(iteration).style.backgroundColor == "red") {
    document.getElementById(iteration).style.backgroundColor = "green";
  } else {
    document.getElementById(iteration).style.backgroundColor = "red";
  }
  iteration++;
  iteration = iteration % divCount;
  if (--maxIterations == 0) {
    var end = performance.now();
    if (window.tpRecordTime) {
      window.tpRecordTime(end - start, start);
    }
    return;
  }

  window.requestAnimationFrame(runFrame);
}

function startTest() {
  start = performance.now();
  window.requestAnimationFrame(runFrame);
}

addEventListener("load", function() {
  if (window.TalosContentProfiler) {
    TalosContentProfiler.resume("displaylist_inactive_mutate.html loaded", true).then(startTest);
  } else {
    startTest();
  }
});
</script>
<script type="text/javascript" src="resource://talos-powers/TalosContentProfiler.js"></script>
</html>
