blob: 2300dc01995f656f4a4957d5ff6e70beda33f28a [file] [log] [blame]
dino@apple.com52b62212014-12-09 01:31:37 +00001<!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>