<!doctype html>
<head>
<script src="../resources/runner.js"></script>
<style>
#rootview {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}
#elements-content { color: gray; overflow: auto; }
.outline { outline: auto; }
</style>
</head>
<body>
<div id="rootview">
    <div id="elements-content"></div>
</div>
<script>
const container = document.getElementById('elements-content');
const kItems = 100;
for (let i = 0; i < kItems; ++i) {
  const child = document.createElement('li');
  container.appendChild(child);
  child.innerHTML = `child ${i} - ` + `<span>= </span>`.repeat(200);
}

PerfTestRunner.forceLayout();

  const startAt = Date.now();

// For http://crbug.com/980399
PerfTestRunner.measureRunsPerSecond({
  descritpion: 'Measuers performance of moving foucs around list item.',
  run : () => {
    let lastChild = null;
    for (const child of container.childNodes) {
      if (lastChild) lastChild.classList.toggle('outline');
      child.classList.toggle('outline');
      lastChild = child;
      PerfTestRunner.forceLayout();
    }
  },
  done: () => {
    container.textContent = '';
  },
});
</script>
</body>