| <!DOCTYPE html> |
| <script src="../resources/runner.js"></script> |
| <pre id="log"></pre> |
| <style>td { border: 1px solid blue }</style> |
| <script> |
| // We discard the first iteration to avoid a cold outlier. |
| var iterations = 11; |
| var results = []; |
| var previousFrameTime = -1; |
| var now = function(){ |
| return window.performance ? performance.now() : Date.now(); |
| }; |
| |
| function createTable(rows, columns) { |
| var table = document.createElement("TABLE"); |
| // Collapsing border is not necessary to see the slowness |
| // but it makes the painting phase ~2x slower. |
| table.style.borderCollapse = "collapse"; |
| for (var i = 0; i < rows; ++i) { |
| var tr = document.createElement("TR"); |
| for (var j = 0; j < columns; ++j) { |
| var td = document.createElement("TD"); |
| tr.appendChild(td); |
| } |
| table.appendChild(tr); |
| } |
| return table; |
| } |
| |
| |
| var table = createTable(300, 320); |
| document.body.appendChild(table); |
| |
| ix=30; |
| iy=30; |
| |
| function toggleBackgroundColor() |
| { |
| var thisFrameTime = now(); |
| if (previousFrameTime != -1) |
| results.push(thisFrameTime - previousFrameTime); |
| previousFrameTime = thisFrameTime; |
| |
| if (iterations == 0) { |
| PerfTestRunner.logStatistics(results, 'ms', "Time:"); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } else { |
| iterations--; |
| window.requestAnimationFrame(toggleBackgroundColor); |
| } |
| |
| table.childNodes[iy].childNodes[ix].style.backgroundColor = 'teal'; |
| ix++; |
| iy++; |
| } |
| |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| // Start the test after two frame to ensure we have set-up, laid out and painted the table. |
| window.requestAnimationFrame(function() { window.requestAnimationFrame(toggleBackgroundColor) }); |
| </script> |
