Files
iD/test/bench/translate-rounding.html
2012-11-30 16:23:36 -05:00

62 lines
2.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Rounded coordinates</title>
<style>
#mover {
width:10px;
height:10px;
background:black;
}
#moved {
width:5px;
height:5px;
background:red;
}
pre {
position:absolute;
top:120px;
width:500px;
}
</style>
</head>
<body>
<div id='mover'>
<div id='moved'></div>
</div>
<pre id='report'></pre>
<script src="https://raw.github.com/bestiejs/benchmark.js/v1.0.0/benchmark.js"></script>
<script>
var suite = new Benchmark.Suite;
// add tests
suite
.add('translate', function() {
document.getElementById('mover').style.webkitTransform = 'translate(' +
(Math.random() * 100) + 'px,' + (Math.random() * 100) + 'px)';
})
.add('translate-rounded', function() {
document.getElementById('mover').style.webkitTransform = 'translate(' +
(~~(Math.random() * 100)) + 'px,' + (~~(Math.random() * 100)) + 'px)';
})
.add('translate3d', function() {
document.getElementById('mover').style.webkitTransform = 'translate3d(' +
((Math.random() * 100)) + 'px,' + ((Math.random() * 100)) + 'px, 0px)';
})
.add('translate3d-rounded', function() {
document.getElementById('mover').style.webkitTransform = 'translate3d(' +
(~~(Math.random() * 100)) + 'px,' + (~~(Math.random() * 100)) + 'px, 0px)';
})
// add listeners
.on('cycle', function(event) {
document.getElementById('report').innerHTML +=
String(event.target) + '\n';
})
.on('complete', function() {
document.getElementById('report').innerHTML +=
'Fastest is ' + this.filter('fastest').pluck('name') + '\n';
})
// run async
.run({ 'async': true });
</script>
</body>