location-changes-scrolling.html | Explore in Territory

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

<style>
  tr { height: 5px; font-size: 4px; }
</style>

<table id="testElement">
  <tr>
    <th>Sender</th>
    <td>Message</td>
  </tr>
</table>

<script>
var isDone = false;
var startTime;

// Before the test starts, add 5000 rows to the table, something like a
// message board with lots of replies on a long thread.
// Ensure test content is generated before page load, so that the test
// construction is not part of the collected traces.
let table = document.getElementById('testElement');
for (let i = 0; i < 5000; i++) {
    let tr = document.createElement('tr');
    table.appendChild(tr);
    let sender = document.createElement('td');
    sender.innerHTML = 'user' + Math.floor(10000*Math.random());
    tr.appendChild(sender);
    let message = document.createElement('td');
    message.innerHTML = '<div style="display:inline-block">Message content ' +
        Math.floor(10000*Math.random()) + '</div> ';
    let link = document.createElement('a');
    link.href = '#';
    link.id = 'link' + i;
    link.innerHTML = 'Reply';
    message.appendChild(link);
    tr.appendChild(message);
    let moreStuff = document.createElement('td');
    moreStuff.innerHTML = '<a href="#"><img> Copy</a> <a href="3"><img> Remind me!</a> <a href="#"><img> Mute</a>';
    tr.appendChild(moreStuff);
    let evenMoreStuff = document.createElement('td');
    evenMoreStuff.innerHTML = '<code>The</code> <code>quick</code> <code>brown</code> <code>fox</code> <code>jumps</code> <code>over</code> <code>the</code> <code>lazy</code> <code>dog</code>... <i><label>Name of dog: <span contenteditable role=textbox><b>fido</b></span></label></i><span><span><span><span>x</span><span>y</span><span>z</span></span?</span></span>';
    tr.appendChild(evenMoreStuff);
    tr.appendChild(evenMoreStuff.cloneNode(/*deep*/ true));
    tr.appendChild(evenMoreStuff.cloneNode(/*deep*/ true));
}

function runTest() {
    if (startTime) {
        PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime);
        PerfTestRunner.addRunTestEndMarker();
    }
    if (!isDone) {
        PerfTestRunner.addRunTestStartMarker();
        startTime = PerfTestRunner.now();

        let scrollTimes = 0;

        window.scrollTo(0, 0);

        let scrollInProcess = false;
        let scroll = () => {
            if (scrollInProcess)
              return;
            scrollInProcess = true;

            if (scrollTimes == 10) {
              // Wait to allow the asynchronous accessibility code that's
              // covered by traceEventsToMeasure to have a chance to run.
              return setTimeout(runTest, 2500);
            }

            requestAnimationFrame(() => {
                scrollTimes ++;
                document.addEventListener("scrollend", () => {
                    scrollInProcess = false;
                    setTimeout(scroll, 300);
                }, { once: true });
                window.scrollBy({
                    top: 3000,
                    behavior: 'smooth'
                });
            });
        };

        scroll();
    }
}

PerfTestRunner.startMeasureValuesAsync({
  description: 'Test accessibility performance when scrolling some divs',
  unit: 'ms',
  done: function () {
    isDone = true;
  },
  run: function() {
    runTest();
  },
  iterationCount: 3,
  warmUpCount: 3, // Give time for a11y events coming from page
                  // construction to pass.
  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-scrolling.html
