CSS transform power of 2 (v4)

Revision 4 of this benchmark created by Snake on

Description

Test if the size of the image or sprite is power of two and show impact on the performance of css transform

Preparation HTML

<div style="position:relative; width: 1100px; height: 512px">
  <div id="poweroftwo" style="position: absolute; left: 480px; width: 512px; height: 512px; background: blue;">
  </div>
  <div id="nopoweroftwo" style="position: absolute; left: -25px; width: 500px; height: 500px; background: red;">
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
  var degreePowerOfTwo = 0,
      degreeNoPowerOfTwo = 0,
      loadPowerOfTwo = 0,
      loadNoPowerOfTwo = 0;
  var loadImage = function(isPowerOfTwo) {
      if (isPowerOfTwo) $('#poweroftwo').css('background', 'url("http://goo.gl/qEmjt") top left no-repeat');
      else $('#nopoweroftwo').css('background', 'url("http://goo.gl/VrMYl") top left no-repeat');
      };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Rotation: Power of two
if (!loadPowerOfTwo) {
  loadImage(1);
  loadPowerOfTwo = 1;
}
degreePowerOfTwo += 0.1;
$('#poweroftwo').css({
  '-webkit-transform': 'rotate(' + degreePowerOfTwo + 'deg)',
  '-moz-transform': 'rotate(' + degreePowerOfTwo + 'deg)',
  '-ms-transform': 'rotate(' + degreePowerOfTwo + 'deg)',
  '-o-transform': 'rotate(' + degreePowerOfTwo + 'deg)',
  'transform': 'rotate(' + degreePowerOfTwo + 'deg)'
});
ready
Rotation: Not power of two
if (!loadNoPowerOfTwo) {
  loadImage(0);
  loadNoPowerOfTwo = 1;
}
degreeNoPowerOfTwo += 0.1;
$('#nopoweroftwo').css({
  '-webkit-transform': 'rotate(' + degreeNoPowerOfTwo + 'deg)',
  '-moz-transform': 'rotate(' + degreeNoPowerOfTwo + 'deg)',
  '-ms-transform': 'rotate(' + degreeNoPowerOfTwo + 'deg)',
  '-o-transform': 'rotate(' + degreeNoPowerOfTwo + 'deg)',
  'transform': 'rotate(' + degreeNoPowerOfTwo + 'deg)'
});
ready

Revisions

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