CSS transform power of 2 (v3)

Revision 3 of this benchmark created by Snake 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 + "deg)"
});
ready
Rotation: Not power of two
angle += 0.1;
bad.css({
  webkitTransform: "rotate(" + angle + "deg)"
});
ready

Revisions

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