location-changes-css-animation.html

<!DOCTYPE html>
<html>
<body>
<script src="../resources/runner.js"></script>

<style>
  .root {
      width: 100%;
      padding: 5px;
      position: absolute;
      transform: translate(0,0);
      transition: transform 2s;
  }
  .child {
      border: 1px solid black;
      height: 10px;
      width: 10px;
      margin: -1px;
      display: inline-block;
  }

  #root1.end {
    transform: translateX(500px);
  }

  #root2.end {
    transform: translateY(500px);
  }
</style>

<div id="container"></div>

<script>
let isDone = false;
let startTime;

// Ensure test content is generated before page load, so that the test
// construction is not part of the collected traces.
generateAllContent();

function runTest() {
  if (startTime) {
    PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime);
    PerfTestRunner.addRunTestEndMarker();
  }

  if (!isDone) {
    PerfTestRunner.addRunTestStartMarker();
    startTime = PerfTestRunner.now();

    animateRoots();
    setTimeout(runTest, 2500);
  }
}

function animateRoots() {
  document.querySelector('#root1').classList.toggle('end');
  document.querySelector('#root2').classList.toggle('end');
}

function generateAllContent() {
  const root1 = container.appendChild(document.createElement('div'));
  root1.id = 'root1';
  root1.className = 'root';

  const root2 = container.appendChild(document.createElement('div'));
  root2.id = 'root2';
  root2.className = 'root';

  for (let i = 0; i < 17; i++) {
    const child1 = generateNodes(100, "blue");
    root1.appendChild(child1);
    const child2 = generateNodes(100, "green");
    root2.appendChild(child2);
  }
}

// Recursively add layers of descendants.
function generateNodes(depth, color) {
  if (depth === 0)
    return;

  const node = document.createElement("div");
  node.className = "child";
  node.style.backgroundColor = color;
  node.setAttribute("tabindex", 0);
  depth--;
  const child = generateNodes(depth, color);
  if(child) {
    node.appendChild(child);
  }
  return node;
}

PerfTestRunner.startMeasureValuesAsync({
  description: 'Test accessibility performance when animating many nodes',
  unit: 'ms',
  done: function () {
      isDone = true;
  },
  run: function() {
      runTest();
  },
  iterationCount: 6,
  tracingCategories: 'accessibility',
  traceEventsToMeasure: [
    'TotalAccessibilityCleanLayoutLifecycleStages',
    'ProcessDeferredUpdatesLifecycleStage',
    'FinalizingTreeLifecycleStage',
    'SerializeLifecycleStage',
    'RenderAccessibilityImpl::SendPendingAccessibilityEvents',
    'BrowserAccessibilityManager::OnAccessibilityEvents',
    'SerializeLocationChanges',
    "BrowserAccessibilityManager::OnLocationChanges"
  ]
});
</script>

</html>
chromium/third_party/blink/perf_tests/accessibility/location-changes-css-animation.html
