| dino@apple.com | 52b6221 | 2014-12-09 01:31:37 +0000 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>Timing test for blur filter</title> |
| 5 | <style> |
| 6 | img { |
| 7 | width: 600px; |
| 8 | height: 600px; |
| 9 | } |
| 10 | </style> |
| 11 | <script> |
| 12 | |
| 13 | var WIDTH = 600; |
| 14 | var HEIGHT = 600; |
| 15 | var NUM_ITERATIONS = 10; |
| 16 | var MAX_RADIUS = 20; |
| 17 | var currentIteration = 0; |
| 18 | var currentRadius = 0; |
| 19 | var testIsRunning = false; |
| 20 | var image = null; |
| 21 | var startTime = null; |
| 22 | |
| 23 | function init() { |
| 24 | document.querySelector("button").addEventListener("click", run, false); |
| 25 | image = document.querySelector("img"); |
| 26 | |
| 27 | // Fill the image with generated content. We can't use a canvas directly, |
| 28 | // since that gets composited. |
| 29 | var canvas = document.createElement("canvas"); |
| 30 | canvas.width = WIDTH * window.devicePixelRatio; |
| 31 | canvas.height = HEIGHT * window.devicePixelRatio; |
| 32 | |
| 33 | // Fill the canvas with some generated content. |
| 34 | var ctx = canvas.getContext("2d"); |
| 35 | ctx.scale(window.devicePixelRatio, window.devicePixelRatio); |
| 36 | |
| 37 | for (var i = 0; i < WIDTH; i += 20) { |
| 38 | for (var j = 0; j < HEIGHT; j += 20) { |
| 39 | ctx.fillStyle = "rgb(" + Math.round(i / WIDTH * 255) + ", " + Math.round(j / HEIGHT * 255) + ", " + (i % 40 ? 64 : 192) + ")"; |
| 40 | ctx.fillRect(i, j, 20, 20); |
| 41 | } |
| 42 | } |
| 43 | |
| 44 | image.src = canvas.toDataURL(); |
| 45 | } |
| 46 | |
| 47 | function run() { |
| 48 | if (testIsRunning) |
| 49 | return; |
| 50 | |
| 51 | testIsRunning = true; |
| 52 | currentIteration = 0; |
| 53 | currentRadius = 0; |
| 54 | startTime = Date.now(); |
| 55 | |
| 56 | step(); |
| 57 | } |
| 58 | |
| 59 | function step() { |
| 60 | var usedRadius = (currentIteration % 2) ? (MAX_RADIUS - currentRadius) : currentRadius; |
| 61 | image.style.webkitFilter = "blur(" + usedRadius + "px)"; |
| 62 | currentRadius++; |
| 63 | if (currentRadius > MAX_RADIUS) { |
| 64 | currentIteration++; |
| 65 | currentRadius = 0; |
| 66 | } |
| 67 | |
| 68 | if (currentIteration < NUM_ITERATIONS) |
| 69 | setTimeout(step, 0); |
| 70 | else |
| 71 | end(); |
| 72 | } |
| 73 | |
| 74 | function end() { |
| 75 | testIsRunning = false; |
| 76 | var elapsedTime = (Date.now() - startTime) / 1000; |
| 77 | var result = document.createElement("p"); |
| 78 | result.textContent = (NUM_ITERATIONS * MAX_RADIUS) + " blurs done in " + elapsedTime + " seconds"; |
| 79 | document.body.appendChild(result); |
| 80 | if (window.testRunner) |
| 81 | testRunner.notifyDone(); |
| 82 | } |
| 83 | |
| 84 | window.addEventListener("load", init, false); |
| 85 | </script> |
| 86 | </head> |
| 87 | <body> |
| 88 | <img> |
| 89 | <p> |
| 90 | <button>Start</button> |
| 91 | </p> |
| 92 | </body> |
| 93 | </html> |
