PerformanceTests/Interactive/blur-filter-timing.html

   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>