| <!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> |
