Bootlin logo

Elixir Cross Referencer

<!DOCTYPE html>
<html>
<head>
  <title>Timing test for blur filter</title>
  <style>
  img {
      width: 600px;
      height: 600px;
  }
  </style>
  <script>

  var WIDTH = 600;
  var HEIGHT = 600;
  var NUM_ITERATIONS = 10;
  var MAX_RADIUS = 20;
  var currentIteration = 0;
  var currentRadius = 0;
  var testIsRunning = false;
  var image = null;
  var startTime = null;

  function init() {
      document.querySelector("button").addEventListener("click", run, false);
      image = document.querySelector("img");

      // Fill the image with generated content. We can't use a canvas directly,
      // since that gets composited.
      var canvas = document.createElement("canvas");
      canvas.width = WIDTH * window.devicePixelRatio;
      canvas.height = HEIGHT * window.devicePixelRatio;

      // Fill the canvas with some generated content.
      var ctx = canvas.getContext("2d");
      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

      for (var i = 0; i < WIDTH; i += 20) {
          for (var j = 0; j < HEIGHT; j += 20) {
              ctx.fillStyle = "rgb(" + Math.round(i / WIDTH * 255) + ", " + Math.round(j / HEIGHT * 255) + ", " + (i % 40 ? 64 : 192) + ")";
              ctx.fillRect(i, j, 20, 20);
          }
      }

      image.src = canvas.toDataURL();
  }

  function run() {
      if (testIsRunning)
          return;

      testIsRunning = true;
      currentIteration = 0;
      currentRadius = 0;
      startTime = Date.now();

      step();
  }

  function step() {
      var usedRadius = (currentIteration % 2) ? (MAX_RADIUS - currentRadius) : currentRadius;
      image.style.webkitFilter = "blur(" + usedRadius + "px)";
      currentRadius++;
      if (currentRadius > MAX_RADIUS) {
          currentIteration++;
          currentRadius = 0;
      }

      if (currentIteration < NUM_ITERATIONS)
          setTimeout(step, 0);
      else
          end();
  }

  function end() {
      testIsRunning = false;
      var elapsedTime = (Date.now() - startTime) / 1000;
      var result = document.createElement("p");
      result.textContent = (NUM_ITERATIONS * MAX_RADIUS) + " blurs done in " + elapsedTime + " seconds";
      document.body.appendChild(result);
      if (window.testRunner)
          testRunner.notifyDone();
  }

  window.addEventListener("load", init, false);
  </script>
</head>
<body>
<img>
<p>
    <button>Start</button>
</p>
</body>
</html>