CSS transform power of 2

Benchmark created by Selim Arsever on

Description

Test if the size of the image and or sprite has an impact on the performance of css transform

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div style="position: relative; width: 960px; height: 530px;">
<div id="nopoweroftwo" style="position: absolute; top: 5px; left: 5px; width: 257px; height: 257px; background: red;"></div>

<div id="poweroftwo" style="position: absolute; top: 263px; left: 5px; width: 256px; height: 256px; background: red;"></div>
</div>
<script>
  var good, bad;
  var angle = 0;
  $(function() {
   good = $('poweroftwo');
   bad = $('nopoweroftwo');
  });
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Rotation: Power of two
angle += 0.1;
good.css({
 webkitTransform: "rotate(" + angle + ")",
 mozTransform: "rotate(" + angle + ")"
})
ready
Rotation: Not power of two
angle += 0.1;
angle += 0.1;
bad.css({
 webkitTransform: "rotate(" + angle + ")",
 mozTransform: "rotate(" + angle + ")"
})
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.