94 lines
2.4 KiB
HTML
94 lines
2.4 KiB
HTML
|
<!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>
|